Font

CSS vlastnost font může určovat všechny css vlastnosti písma najednou.

font
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.

Podpora vlastnosti font
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

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB

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.