Font-size
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).
Podpora
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 |
Zvětšování písma uživatelem
Dříve, ještě když existoval Internet Explorer, se při zvětšování stránky zvětšovalo jenom písmo, ostatní rozměry zůstávaly fixní. To vedlo k tomu, že se stránka musela ladit pro různé velikosti zvětšení. Od té doby, co přišly modernější prohlížeče (v podstatě od Chrome a Firefoxu dál), se při zvětšování stránky uživatelem nezvětšuje jenom písmo, ale i rozměry prvků na stránkce (tj. obrázky, šířky boxů apod.). Takže stránka jakoby zoomuje. Tí pádem už není potřeba zvětšování písma uživatelem řešit tolik.
Zvětšování písma se ve většině prohlížečů dá udělat držením klávesy CTRL a současným točením kolečkem myši. Nebo je to v menu > zobrazení.
Dříve se zneužívalo chování Internet Exploreru, který písma zadaná v jednotkách px (pixel) při uživatelském zvětšování nezvětšoval. Někteří autoři stránek to tak chtěli, protože pro ně byla větší hodnota méně práce a menší hodnota uživatelský zážitek (například aby uživatel vůbec stránku přečetl). Proto se rozšířilo přesvědčení, že zadávat velikost písma v jednotce px je prasárna. Opět - od doby rozšíření nových prohlížečů už je to jedno, protože písma v px se uživatelsky zvětšují stejně jako písma zadaná v jiných jednotkách.
Řešením tedy bývalo všechno zadávat v procentech. Např.
body {font-size: 80%}
písmo pak je v celé stránce 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. Tenkrát to byl jediný spolehlivý způsob, jak dobře vyjít jak s divným Internet Explorerem 5 (který neměl módy) a zároveň s moderní Mozillou. Dnes už je to fakt jedno. I tak zůstávají procenta pro font-size dobrou jednotkou.
Další vlastnosti kolem font-size
Vlastnost font-size-adjust je užitečná v situaci, kdy se v důsledku nenačtení části fontu zobrazuje text dvěma písmy najednou. Typicky se to stává, když třeba načtené písmo neumí české znaky, a ty se tedy zobrazí nějakým náhradním (fallback) fontem. To by normálně nemusel být takový problém, protože velikost fontů je stejná. Ta velikost se ale normálně počítá od velikosti verzálek (velkých písmen). Takže pokud tahle dvě písma mají jinou výšku malých písmen, už je to vidět a je to fuj. Vlastnost font-size:ex-height zařizuje, že se zvětšování písma nebude odvozovat od verzálek (velkých písmen), což je normální chování, ale bude se odvozovat od velikosti mínusek (malých písmen). To se hodí v situaci, kdy chci, aby nebylo moc vidět, že je text dvěma písmy. Font-size: ex-height tedy odvozuje zvětšování od malého písmene x a zajistí, že v obou písmech budou různá malá písmena stejně velká. Font-size: ch-width odvozuje zvětšování od šířky číslice 0 (nula). Dále existují další dvě hodnoty pro čínštinu.
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
