Font-perekond - CSS-trikid

Anonim

font-familyVara 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-facevõi kasutaja operatsioonisüsteemi installituna.

Sest font-familypuudub 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