font-family
Vara määratleb font, mida rakendatakse valitud element. Valitud font ei ole üks fondinägu, vaid perekond ja võib seepärast perekonnas õige näo valimiseks sõltuda muudest tüpograafiliste omaduste väärtustest.
body ( font-family: Arial, Helvetica, sans-serif; )
Väärtus võib olla üks järgmistest:
- Fondipere nimi, mis sobib lehele manustatud või kasutaja süsteemis saadaval oleva fondiga.
- Komadega eraldatud perekonnanimede rida, mis võib sisaldada üldist perekonnanime
Mitme perekonnanime kasutamisel valib brauser esimese, mille ta leiab kas lehele manustatuna @font-face
või kasutaja operatsioonisüsteemi installituna.
Sest font-family
puudub konkreetne vaikeväärtus või algväärtus; algväärtus sõltub alati brauserist ja / või operatsioonisüsteemist.
Üldised perekonnanimed
Kui ühe deklaratsiooni jaoks kasutatakse mitut väärtust, on parima tüpograafilise kasutuskogemuse tagamiseks soovitatav varukoopiana loetleda viimane perekond:
code ( font-family: Courier, Monaco, monospace; )
Ülaltoodud näites on „Courier” ja „Monaco” tegelike fontide tegelikud perekonnanimed, samas kui „monospace” on vaid üldine viide igale kasutaja süsteemile installitud fontile, mis on ühepoolne.
Kui esimest kahte ei leita installitud, valib brauser parima võimaluse, kuid ainult ühemahuliste fontide hulgast. Ilma üldise perekonnata oleks font vaikimisi kasutaja süsteemis vaikimisi kasutatav font (tõenäoliselt serif või sans-serif), mis oleks ebasoovitav.
Generic perekonnanimed hulka serif
, sans-serif
, cursive
, fantasy
, ja monospace
.
Kui perekonnanimi kattub üldise perekonnanimega, tuleks perekonnanimi tsiteerida, et näidata, et see pole üldine.
Mitmesõnalised perekonnanimed
Kui perekonnanimi sisaldab mitu tühikutega eraldatud sõna, on soovitatav perekonnanimi loetleda jutumärkides (ühe- või kahekordsed):
code ( font-family: "Times New Roman", Georgia, serif; )
See pole alati vajalik, kuid üldiselt on ohutum lisada jutumärgid igale perekonnanimele, millel on tühikud või erimärgid.
Brauseri tugi
Chrome | Safari | Firefox | Ooper | IE | Android | iOS |
---|---|---|---|---|---|---|
Töötab | Töötab | Töötab | Töötab | Töötab | Töötab | Töötab |