Font
CSS vlastnost font může určovat všechny css vlastnosti písma najednou.
| hodnoty | souhrnné vlastnosti fontu |
|---|---|
| kurzíva verzálky tučnost velikost/výška_řádku rodina_písma | musí být v tomto pořadí |
| velikost rodina | všechno ostatní možno vynechat |
| systémové jméno caption menu messagebox smallcaption statusbar |
systémové jméno písma přetluče všechny ostatní vlastnosti písma |
Jde o úspornější zápis vlastností písma. Při zápisu vlastností se musí dodržovat pořadí, jinak to nebude fungovat. Většina hodnot se může vynechat, jen velikost a rodina písma (font-family) jsou povinné.
Podpora
Jedná se možná o nejlépe podporovanou vlastnost vůbec.
| Prohlížeč | Podpora ve verzích | Poznámka |
|---|---|---|
| Internet Explorer | všechny verze | |
| Firefox | všechny verze | |
| Opera | všechny verze | u systémových písem (caption apod.) kazí češtinu |
| Chrome | ano |
Příklady
Aby se nemusely vlastnosti písma zdlouhavě vypisovat, dají se zapsat najednou:
{font: italic bold 15px/1.5 Arial}
je totéž, jako rozvleklejší zápis
{font-style: italic; font-weight: bold; font-size: 15px; line-height: 1.5; font-family: Arial}
Hodnoty se k vlastnosti font musí zadávat v přesném pořadí. Toto je špatně:
{font: Arial bold italic 15px/1.5}
Různé další špatné variace zápisu si jistě odvodíte sami (je jich moc). Překvapivě ale fungují i některá špatná pořadí, pokud se nezadává font-variant (kapitálky). Například toto funguje:
{font: bold italic 15px/1.5 Arial}
Zpět ke správnému pořadí. Pokud se jenom něco vynechá, ale neporuší pořadí, je to dobře, např. dvojnásobně velké písmo Courier:
{font: 2em Courier}
Při takovém zápisu se ale všechny nezadané vlastnosti nastaví na původní hodnoty (myslím, že kromě line-height, nevím). Je to vidět na příkladu: pokud se nezadá tučnost, chápe se písmo jako netučné. Příklad převážení nezadané tučnosti (font oproti font-weight).
Další variantou zápisu jsou systémové rodiny písma, kdy se font nastaví podle aktuálního nastavení operačního systému. Např.:
#navigace {font: icon}
h5 {font: smallcaption}
Příklad použití systémových písem:
caption menu messagebox smallcaption statusbar
Reklama
