Obecně platí, na webu můžeme použít patkové nebo bezpatkové písmo. Jelikož potřebujeme zajistit zobrazenitelnost na příč různými platformami, definujeme výčet písem oddělených čárkou. Prohlížeč si vybere písmo, které má k dizpozici s preferencí, kterou definujeme pořadím. Pokud není písmo k dizpozici, tak zvolí písmo výchozí, které je definované v nastavení webového prohlížeče. Aplikaci vlastností CSS na zobrazení lze takéž ovlivnit nastavením prohlížeče.
font:15px Verdana, Arial, Helvetica, sans-serif;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<style type="text/css">
<!--
.prvni1 {font:12px;font-family: arial;}
.prvni2 {font:12pt;font-family: arial;}
.prvni3 {font:12em;font-family: arial;}
.prvni4 {font:12px;font-family: helvetica;}
.prvni5 {font:12pt;font-family: helvetica;}
.prvni6 {font:12em;font-family: helvetica;}
.prvni7 {font:12px;font-family: verdana;}
.prvni8 {font:12pt;font-family: verdana;}
.prvni9 {font:12em;font-family: verdana;}
.prvni7 {font:12px;font-family: times;}
.prvni8 {font:12pt;font-family: times;}
.prvni9 {font:12em;font-family: times;}
.prvni10 {font:12px;font-family: courier;}
.prvni11 {font:12pt;font-family: courier;}
.prvni12 {font:12em;font-family: courier;}
.stin {text-shadow: 3px 3px 3px red}/*x-ová, y-ová, z-ová souřadnice, barva*/
.italic {font-style:italic}
.variant {font-variant:small-caps}
.tucni1 {font-weight:100}
.tucni2 {font-weight:200}
.tucni3 {font-weight:300}
.tucni4 {font-weight:400}
.tucni5 {font-weight:500}
.tucni6 {font-weight:600}
.tucni7 {font-weight:700}
.tucni8 {font-weight:800}
.tucni9 {font-weight:900}
//-->
</style>
<title> </title>
</head>
<body>
<p class="prvni1">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni2">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni3">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni4">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni5">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni6">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni7">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni8">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni9">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni10">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni11">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni12">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<hr>
<p class="prvni1 stin">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni2 stin">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni3 stin">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni4 stin">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni5 stin">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni6 stin">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni7 stin">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni8 stin">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni9 stin">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni10 stin">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni11 stin">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni12 stin">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<hr>
<p class="prvni1 italic">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni2 italic">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni3 italic">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni4 italic">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni5 italic">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni6 italic">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni7 italic">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni8 italic">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni9 italic">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni10 italic">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni11 italic">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni12 italic">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<hr>
<p class="prvni1 variant">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni2 variant">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni3 variant">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni4 variant">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni5 variant">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni6 variant">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni7 variant">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni8 variant">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni9 variant">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni10 variant">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni11 variant">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni12 variant">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<hr>
<p>Různé úrovně tučnosti: </p>
<p class="prvni2 tucni1">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni2 tucni2">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni2 tucni3">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni2 tucni4">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni2 tucni5">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni2 tucni6">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni2 tucni7">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni2 tucni8">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<p class="prvni2 tucni9">Šikovný žluťoučký kůň úpěl překrásné ódy </p>
<hr>
</body>
</html>
http://www.w3schools.com/css/css_font.asp
http://www.w3schools.com/css/css_font.asp
