Vlastnosť font-family

Vlastnosť font-family nastavuje typ písma.

Syntax

selektor {
	font-family: názov písma;
}

Poznámka

Ak názov písma obsahuje medzery, napríklad Times New Roman, musí byť uzavretý do jednoduchých alebo dvojitých úvodzoviek.

Poznámka

Je možné uviesť viacero podobných písiem oddelených čiarkou. Keď prehliadač narazí na prvé písmo v zozname, skontroluje jeho prítomnosť na počítači používateľa. Ak také písmo nie je k dispozícii, berie sa ďalšie písmo zo zoznamu a tiež sa analyzuje na prítomnosť. Preto viacero písiem zvyšuje pravdepodobnosť, že aspoň jedno z nich bude nájdené na klientovskom počítači.

Zoznam sa zvyčajne končí kľúčovým slovom, ktoré popisuje typ písma (všetky písma patria do nejakého typu) - serif, sans-serif, cursive, fantasy alebo monospace. Ak prehliadač nenašiel žiadne z uvedených písiem na počítači používateľa, vyberie jedno z písiem uvedeného typu.

Typy písiem

Typ	Popis
`serif`	Písmo s pätkami (serif).
`sans-serif`	Písmo bez pätiek (bezserifové).
`cursive`	Kurzívne písmo.
`fantasy`	Dekoratívne písmo s peknými závinmi a neobvyklými efektami.
`monospace`	Monospace písmo, kde šírka každého znaku je rovnaká.

Predvolená hodnota: písmo nastavené v prehliadači ako predvolené. Zvyčajne je to Times New Roman.

Príklad

Nastavme písmu rodinu Arial:

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

p {
	font-family: Arial;
}

Príklad

Nastavme písmu rodinu Times New Roman. Keďže názov písma pozostáva z viacerých slov, vezmeme ho do úvodzoviek:

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

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

Príklad

Nastavme písmu písmo zo skupiny serif (s najväčšou pravdepodobnosťou sa použije Times New Roman):

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

p {
	font-family: serif;
}

Príklad

Nastavme písmu písmo zo skupiny sans-serif (s najväčšou pravdepodobnosťou sa použije Arial):

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

p {
	font-family: sans-serif;
}

Príklad

Nastavme písmu písmo zo skupiny fantasy (u vás nemusí fungovať kvôli neprítomnosti takého písma):

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

p {
	font-family: fantasy;
}

Príklad

Nastavme písmu písmo zo skupiny monospace (písmená budú mať rovnakú veľkosť):

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

p {
	font-family: monospace;
}