CSS vlastnost font-size určuje velikost písma.
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.
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:
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).
Font-size je velmi dobře podporovaná vlastnost.
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 |
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.
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.
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í.
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.
Porovnání velikosti písem v prohlížečích
Jak psát web píše Yuhů, Dušan Janovský. Kontakt.