Font-size

CSS vlastnost font-size určuje velikost písma.

font-size
hodnoty velikost písma zvětšovací v Exploreru
velikost v jednotkách jednotky px, pt, mm, in, em, ex, en a procenta jak co
klíčové slovo (např. small) sedm stupňů jako ve starém html (viz níže) ano
smaller, larger o stupeň menší nebo o stupeň větší písmo ano
inherit použije se velikost písma nadřazeného prvku  

Pokud není velikost písma deklarována vůbec, kreslí se u normálních tagů ve většině případech velikostí 16px (vypozorováno). To je tedy výchozí velikost (odpovídá velikosti medium, v Exploreru small). Velikost písma se dá zadat i souhrnnou vlastností font.

Velikost písma se dá zadat celou řadou jednotek. V následující tabulce je pár příkladů. Druh použité jednotky ovlivňuje, zda si bude uživatel Internet Exploreru moci písmo zvětšit příkazem Zobrazit > Velikost.

font-size: příklady různých jednotek
jednotka význam příklad velikost písma příkladu zvětšovací v Exploreru
px pixel, obrazovkový bod 12px dvanáct pixelů (obrazovkových bodů) ne
pt typografický bod (jako ve Wordu) 9pt devět typografických bodů (na windows 12px) ne
mm milimetr 5mm pět milimetrů ne
in palec .5in půl palce :-) ne
em výška písmena M 1.5em jeden a půl normální velkosti ano, poskakuje
% procento 80% osmdesát procent normální velikosti ano

U procentuálních hodnot font-size se velikost písma odvozuje od velikosti zděděné z nadřazených tagů. Jinak řečeno font-size je vlastnost dědičná. Pokud tedy např. nastavím body na velikost 12px, budou se procentuální velikosti všeho podřízeného počítat od těch 12px (a kvůli těm pixelům nebudou zvětšovací). Lepší je ovšem nenastavovat nic v pixelech, aby to bylo zvětšovací.

Další úskalí u procent je to, že se počítají z velikosti písma nadřazeného prvku. Tedy nikoli ze své přirozené velikosti. Například nadpis h1 -- pokud mu dám velikost font-size: 50%, tak se nezmenší na polovinu své normální velikosti, ale na polovinu velikosti normálního písma (nadřazený prvek je dejme tomu body).

Zvětšování v Exploreru se dělá třeba nabídkou Zobrazit > Velikost písma a je tam pět stupňů. Nebo funguje ctrl + kolečko myši.

Klíčová slova pro velikost písma byla (podle mého úsudku) zavedena jako napodobení html stupňů velikosti písma tagu <font>. Jsou v Exploreru zvětšovací, ale jejich výsledná velikost závisí na prohlížeči (takže se moc nepoužívají). Přesněji vzato to závisí na tom, jestli prohlížeč pracuje ve quirk nebo standardním módu:

font-size: seskládání stejně zobrazujících deklarací do řádků
hodnota, klíčové slovo odpovídá <font size=""> odpovídá v Exploreru v normálním nastavení a v Opeře bez doctype (quirk mode) odpovídá ve standardním nastavení Mozilly a ve standard modu Opery a Exploreru 6 (standard mode) zvětšovací v Exploreru
xx-small 1 10px 9px ano
x-small 2 13px 10px ano
small 3 16px 13px ano
medium 4 18px 16px ano
large 5 24px 18px ano
x-large 6 30px 24px ano
xx-large 7 nevim 30px ano
bez zadání 3 nebo 4 16 px 16px ano

Zdroj: vlastní měření -- příklad. Z tabulky vyplývá, že při použití klíčových slov kreslí Explorer všechno o jeden stupeň větší. Základní velikost totiž v Exploreru (quirk mode) odpovídá hodnotě small, v jiných prohlížečích medium. Od toho se odvíjí ten problém zvětšení písma v Exploreru. Jediné, co kreslí všechny prohlížeče stejně, je velikost nijak neovlivněného textu (16 px).

Podpora

Font-size je velmi dobře podporovaná vlastnost.

Podpora vlastnosti font-size
Prohlížeč Podpora ve verzích Poznámka
Internet Explorer všechny verze IE 5.0 chybuje u larger a smaller
špatně interpretuje slovně zadané hodnoty (v quirk módu je kreslí o stupeň větší)
Firefox všechny verze  
Opera všechny verze  
Chrome ano  

Zvětšování písma

Hodně málo uživatelů ví o tom, že si v prohlížeči mohou písmo zvětšit. Důvody:

Když uživatel poprvé zkusí zvětšit písmo a nic se nestane, tak už to podruhé nezkusí. Autoři stránek, kteří zadávají písmo v Exploreru nezvětšovací (zadané v px nebo v pt) tak vychovávají uživatele k nepoužívání zvětšování. Je ale důležité počítat se zvětšováním písma při návrhu designu. Hodně stránkám se při zvětšování nebo zmenšování písma rozpadají grafické prvky (zejm. menu).

Obecně se doporučuje používat na jedné stránce pouze jednu jednotku (například všude em nebo pixely). Osobně doporučuji trochu jinou věc. Mám dobré zkušenosti se zadáním velikosti menu a úzkých prvků v pixelech. Na dlouhé texty doporučuji zadávání pomocí em nebo procenty, protože takové písmo se pro čtení dá zvětšovat.

Zlatá procentní cesta

Autoři často chtějí, aby jejich stránky vypadaly ve všech důležitých prohlížečích stejně, tj. aby velikost písma byla všude stejná. Proto často nastavují velikost písma v pixelech. To skutečně zaručí stejnost, ale písmo pak nepůjde zvětšovat (což pro hodně uživatelů znamená, že nepůjde přečíst, zejména pokud je velikost písma jedenáct pixelů.) Pokud se ale písmo nastaví v jednotkách em (aby šlo zvětšovat), pak v Exploreru 5 bude o jeden stupeň menší, než v Mozille.

Řešením je všechno zadávat v procentech. Např.

body {font-size: 80%}

písmo pak bude v celém dokumentu trochu menší (asi 13px za normálních okolností), což je příjemné, protože dále není pro normální text potřeba cokoli nastavovat. Když pak chci mít někde třeba nadpis zase větší (a zvětšovací), napíšu třeba

h3 {font-size: 125%}

tím se velikost za normálních okolností dostane zase na asi 16px. Chce to umět trochu počítat procenta, ale je to jediný způsob, jak dobře vyjít jak s divným Internet Explorerem 5 (který nemá módy) a zároveň s moderní Mozillou.

EM poskakující

Hodně moderně postavených stránek je vystavěno na jednotce em. Je to perfektní jednotka (odpovídá velikosti velkého písmena M), v exploreru je zvětšovací. Pokud se ale ve stránce použije vícekrát po sobě, zvětšování skáče po moc velkých krocích. Při zvětšování a zmenšování písma v Exploreru se zvětšení přidává všem jednotkám em ve stránce, takže zanořené em-stylované fonty se nezvětší o asi těch dvacet procent, ale třeba o šedesát procent (jsou-li třikrát zanořeny).

Procenta se takto divně nechovají.

Příklady

Vlastnosti ovlivňující celý dokument jsou zapsány ve stylopisu:

<style>
p {font-size: 13px} /* všechny odstavce <p> budou mít písmo velké 13 pixelů */
td {font-size: small} /* všechno písmo v buňkách tabulky <td> bude "malé" */
.patka {font-size: 90%} /* element, který má nastaveno class="patka", bude zmenšen */
</style>

Jiný příklad ukazuje použití přímého stylu:

<span style="font-size: large">veliký text</span>

Atribut style se může takto použít u libovolného prvku, ale je to moc pracné.

Další příklad ukazuje, jak se zastarale velikost písma zadávala tagem <font>, například:

<font size="6">Veliké písmo</font>

Velikost je číslo od 1 do 7, jsou to html stupně písma. Použití tagu <font> nedoporučuji a nepatří to do CSS. Zmiňuji to jenom pro úplnost.

Další příklad

Porovnání velikosti písem v prohlížečích

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
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.