Omadus font-family

Omadus font-family määrab fondi tüübi.

Süntaks

selektor {
	font-family: fondi nimi;
}

Märkus

Kui fondi nimes on tühikuid, näiteks Times New Roman, tuleb see panna ühekordsetesse või kahekordsetesse jutumärkidesse.

Märkus

Saab loetleda mitu sarnast fonti koma abil. Kui brauser kohtab esimest fonti loendis, kontrollib see selle olemasolu kasutaja arvutis. Kui sellist fonti pole, võetakse järgmine font loendist ja samuti analüüsitakse selle olemasolu. Seega mitu fonti suurendab tõenäosust, et vähemalt üks neist leitakse kliendi arvutilt.

Loetelu lõpetatakse tavaliselt võtmesõnaga, mis kirjeldab fondi tüüpi (kõik fondid kuuluvad mingisse tüüpi) - serif, sans-serif, cursive, fantasy või monospace. Kui brauser ei leidnud ühtki määratud fonti kasutaja arvutist, siis see valib ühe määratud tüüpi fondidest.

Fondi tüübid

Tüüp	Kirjeldus
`serif`	Fond seriifidega.
`sans-serif`	Fond ilma seriifideta.
`cursive`	Kursiivne fond.
`fantasy`	Dekoratiivne fond iluste volangite ja ebatavaliste efektidega.
`monospace`	Monospace-fond, kus iga sümboli laius on sama.

Vaikeväärtus: brauseris vaikimisi seatud fond. Tavaliselt on see Times New Roman.

Näide

Määrame fondile perekonna Arial:

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: Arial;
}

Näide

Määrame fondile perekonna Times New Roman. Kuna fondi nimi koosneb mitmest sõnast, siis paneme selle jutumärkidesse:

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: "Times New Roman";
}

Näide

Määrame fondile fondi grupist serif (tõenäoliselt võetakse Times New Roman):

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: serif;
}

Näide

Määrame fondile fondi grupist sans-serif (tõenäoliselt võetakse Arial):

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: sans-serif;
}

Näide

Määrame fondile fondi grupist fantasy (teil ei pruugi toimida, kuna sellist fonti pole olemas):

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: fantasy;
}

Näide

Määrame fondile fondi grupist monospace (tähed muutuvad ühesuurusteks):

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: monospace;
}