Font-family

CSS vlastnost font-family určuje font, který se použije k vykreslení písma.

font-family
hodnoty použitý font
jméno fontu pokud prohlížeč písmo najde, použije ho k vykreslení prvku
jméno fontu1, jméno fontu2 pokud prohlížeč nenajde první písmo, zkouší najít další
obecné jméno fontu prohlížeč má v sobě nadefinováno pár fontů

Font-family se někdy překládá jako rodina písma, častěji se o tom mluví prostě jako o fontu. Dá se tak nastavit třeba Arial, Times a jiné fonty.

Jiné fonty ale nemusejí být na počítači uživatele nainstalovány nebo nemusejí být správně česky. Velmi častá chyba je uvést do font-family nějaké zvláštní písmo, které mám na počítači jenom já. V lepším případě jej uživatel neuvidí a písmo se mu vykreslí základním písmem (obvykle Times), v horším případě to zvláštní písmo nainstalováno mít bude, ale v západoevropské verzi. Pak se rozhazuje diakritika u písmenek ě š č ř ů. (Vizte i jiné problémy češtiny.) Pokud je potřeba zobrazit uživateli nějaký text v konkrétním a přesném fontu, dá se to udělat načítaným fontem přes pravidlo @font-face, ale moc to nedoporučuju používat.

Právě z důvodu, že některá písma nemusejí být nainstalovaná, se jejich zápisy za sebe mohou řadit.

Jméno fontu, které obsahuje mezeru, se uzavírá do uvozovek. U žádné jiné CSS vlastnosti se uvozovky nepoužívají. Příklad:

body {font-family: "Geneva CE", "Arial CE", sans-serif;}

Také se místo uvozovek mohou použít apostrofy; ty se hodí hlavně při přímém zápisu atributu style, uvnitř kterého se uvozovky nedají použít. Příklad:

<span style="font-family: 'Geneva CE', sans-serif;">

Obecná jména fontů (jako třeba to sans-serif) záleží na nastavení prohlížeče nebo operačního systému (na windows se to dělá někde v nastavení plochy, nevím).

font-family - obecná jména fontů
hodnota obecné jméno fontu
serif patkové písmo, nejčastěji Times New Roman
sans-serif bezpatkové písmo, nejčastěji Arial
cursive psací písmo
fantasy divoké volně psané písmo
monospace jako psací stroj

Podpora

Všude.

Podpora vlastnosti font-family
Prohlížeč Podpora ve verzích Poznámka

Internet Explorer

všechny verze  
Mozilla (Firefox, Netscape 6+ atd.) všechny verze  
Opera všechny verze  
Chrome ano  

Příklady

Nejčastěji se nastavuje bezpatkové písmo celé stránce. Dá se to udělat např. tímto zápisem:

body {font-family: Arial, Helvetica, sans-serif}

Pokud na operačním systému není nainstalován Arial, hledá prohlížeč Helveticu. Pokud ani tu nenajde, vykreslí písmo písmem bez-patkovým (sans-serif).

Další příklady:

Použití uživatelských písem aneb test obecných jmen fontů

Existuje jen relativně velmi málo písem, které lze s velkou pravděpodobností úspěchu na stránkách použít. Webově použitelná písma -- přehled (zastaralé).

Test fontů dostupných na Windows 7

 

>

 

o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

 

Jak psát web píše Yuhů, Dušan Janovský. Kontakt. Poslední aktualizace 03. dubna 2014.