Kaskádové styly – ostatní vlastnosti písma

V minulých dvou dílech jsem psal o možnostech, které kaskádové styly nabízí pro definování druhu písma (fontu) a velikosti písma. V tomto díle se budu zmiňovat o zbylých možnostech určování vlastností písma pomocí kaskádových stylů CSS.

Začneme tedy s tloušťkou písma. Většina z Vás se setkala při své práci na počítači s tučným písmem, případně obyčejným, netučným. Ve skutečnosti existuje při rozeznávání tloušťky písma mnohem jemnější stupnice. Konkrétně kaskádové styly rozeznávají v základní variantě 9 druhů tloušťky.

Samotná tloušťka písma se určuje pomocí značky font-weight. Pokud Vám stačí rozeznávat pouze netučné a tučné písmo, stačí použít slovo normal pro netučné a bold pro tučné písmo:

h1 { font-weight: bold; } h2 { font-weight: normal; }

Většině z vás bude asi takové rozdělení písma stačit. Přesto se pojďme podívat i na další možnosti, které kaskádové styly nabízejí.

Pokud chcete odstupňovat tloušťku písma ve svých dokumentech jemněji, nabízejí kaskádové styly stupnici od 100 do 900. Neměly by se používat libovolná čísla, ale pouze násobky čísla sto, tedy 100, 200, 300 až 900. Normální, klasické netučné písmo má odpovídat číslu 400. To, co je obvykle v různých editorech označováno jako tučné písmo by mělo odpovídat číslu 700. Teoreticky tedy máte možnost mít písmo slabší, než je obyčejné i silnější, než je běžné tučné písmo.

Pro příklad zápis stylu, který je totožný s použitím slova bold:

h1 { font-weight: 700; }

Aby to nebylo tak jednoduché, opět se nám ukazuje problém, který se ukázal už při definování druhů a velikostí fontů. Je tím opět stará známá skutečnost, že nadefinovat můžeme cokoli, ale ne vždy to lze zobrazit. Takže ačkoli máme 9 tloušťek písma, nemusí mít prohlížeč vždy možnost všechny zobrazit. Pak se to řeší tak, že několik stupňů jakoby splývá.

Například si představme, že prohlížeč dokáže zobrazit jenom 4 tloušťky písma. Aby bylo možné zobrazit všech devět stupňů, prohlížeč se může rozhodnout třeba tak, že tloušťky 100 až 400 zobrazí stejně tlustě. O něco silnějším písmem zobrazí tloušťku 500. Ještě silnějším písmem tloušťky 600 a 700 a nejsilnějším písmem tloušťky 800 a 900.

Tento příklad by vám měl ukázat, že prohlížeč si umí poradit, i když nemá možnost zobrazení devíti odlišných tloušťek písma, ale méně, v našem případě čtyři. Příklad by vám měl ukázat také to, že se nelze spoléhat na to, že písmo třeba 700 bude silnější, než písmo 600. Jediné, co máte zaručeno, že vyšší číslo určitě nebude představovat slabší písmo.

A aby byl náš výčet možností pro sílu písma úplný, jsou zde ještě slova lighter a bolder. V zásadě se chovají jednoduše. Pokud použijete slovo bolder, prohlížeč se snaží zobrazit nejbližší následující tloušťku písma, kterou má k dispozici oproti tloušťce, kterou by zobrazil, pokud bychom vlastnost font-weight nepoužili. Pokud se nepodaří zobrazit tlustější písmo, písmo zůstává nezměněno. Obdobně se chová lighter s tím rozdílem, že se snaží o zobrazení o stupeň slabšího písma.

Opusťme teď tloušťku písma, a věnujme se tomu, jak nastavit skloněné písmo. Běžně jste se setkali s pojmy jako kurzíva, italic apod. Pro nastavování této vlastnosti slouží font-style:

h1 { font-style: italic; }

U vlasnosti font-style můžete použít tři slova, a to normal, oblique a italic. Vysvělení je celkem prosté, oblique znamená skloněné písmo a italic značí kurzívu.

Jako bonbónek můžete využít vlastnost font-variant. Tato vlastnost určuje, zda se bude písmo zobrazovat kapitálkami (slovo small-caps), nebo normálně (jako obykle slovo normal). Pro neznalé, kapitálky znamenají, že text bude vysázen tak, že namísto písmen malé abecedy budou nahrazena písmeny velké abecedy s o něco menší velikostí. Malý příklad je zde: Příklad kapitálek. Tento příklad uvidíte pouze tehdy, pokud váš prohlížeč podporuje CSS styly.

V této chvíli jsem prošel všechny základní vlastnosti písma tak, jak se nastavují v kaskádových stylech CSS. Můžete se již nyní ve svých webových stránkách vyřádit do sytosti. Při tom se většinou stává, že nastavujete více vlastností písma najednou. Proto kaskádové styly nabízí zkratku, a to použití vlastnosti font, u kterého můžete definovat více věcí najednou.

Začněme s příkladem. Řekněme, že nastavíme font Arial s tučnou kurzívu. To můžeme zařídit buď takto:

p { font-family: Arial,sans-serif; font-weight: bold; font-style: italic; }

A nebo takto:

p { font: italic bold Arial,sans-serif; }

Oba zápisy by měly dávat stejný výsledek. Pokud použijete zápis pomocí font, nelze psát za sebou vlastnosti v libovolném pořadí. Ačkoli to není jediná možnost, stačí, když budete uvnitř zápisu font dodržovat následující pořadí: Slova, která byste definovali ve vlastnosti font-style, potom slova, která by byla uvnitř vlastnosti font-variant, dále slova pro font-weight, dále font-size a nakonec font-family. Libovolné části toho výčtu můžete vynechat. Kromě toho lze ještě uvnitř definovat výšku řádky, ale to zatím necháme na nějaký pozdější díl tohoto seriálu.

Některé další příklady:

p { font: 80% sans-serif; } p a { font: normal small-caps 120% „Times New Roman“, serif } p b { font: italic normal bold 1.5em Tahoma, serif }

A to je pro tento díl vše.