<!DOCTYPE html>
<html>
<head>
<title>Test page for font</title>
<style type="text/css">
body{
margin: 10px;
border: 1px solid #000;
padding: 10px;
font: 12px Verdana, Arial, sans-serif;
line-height: 150%; /*Don't forget!*/
}
blockquote{
margin: 0 0 0 20px;
line-height: 150%;
font: italic 15px Geogia, Times, serif;
}
P{
/*The font order: style, variant, weight, size/line-height family
i.e. font:italic small-caps bold 12px/150% verdana,arial,sans-serif*/
font: 12px verdana,Arial,sans-serif;
text-indent: 2ex;
}
p.dropcap:first-letter{
float:left;
width:30px;
font: bold 40px "Lucida Grande", Arial, sans-serif;
line-height: 50px;
border:1px dotted #000;
padding: 2px;
}
h2{
clear:left;
}
</style>
</head>
<body>
<h1>Content is King</h1>
<p class="dropcap">This is a paragraph. Nothing particularly special about it, but the visitor is going to read it anyway, so it may as well say something useful.</p>
<h2>True Fact</h2>
<p>Useful. OK. Did you know that a shrimp's heart is actually in its head? It's true.</p>
<blockquote>Collision stands by his statement that a shrimp's heart is actually in its bottom, and doggedly refuses to belive that he is wrong.</blockquote>
</body>
</html>
|
/*Lucide Grande for mac, Lucida Sans Unicode for win*/
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
/*Modern font:
Futura, Helvetica for mac, Arial for win*/
font-family: Futura, Helvetica, Arial, sans-serif;
/*Helvetica Neue is a improved version of Helvetica, most of computer has it*/
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
/*suitable for posters and wrappers font, pre-installed on mac*/
font-family: "Gill Sans", "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
/*printable font, on most of mac and win*/
font-family: Palatino, Georgia, "Times New Roman", serif;
|
