Tvorba webu » CSS » Písma v CSS

Písma v CSS

Pomocí CSS lze nastavit rodinu, styl, duktus (tloušťku), velikost a variantu písma.

Popis všech vlastností písma je shrnut v přehledných tabulkách.

Rodina písma - font-family

Rodina písma umožňuje nastavit k jakémukoliv elementu seznam písem jako hodnota se uvádí seznam písem. Pokud prohlížeč nebude mít k dispozici první písmo použije druhé písmo pokud nebude k dispozici ani druhé použije třetí a pokud ani teď nenalezne požadované písmo zobrazí standardní písmo.

Nejčastěji používané seznamy písem jsou v seznamu, můžete se podívat i na popis všech písem.

• font-family : Arial, Helvetica, sans-serif;
• font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
• font-family : "Times New Roman", Times, serif;
• font-family : "MS Sans Serif", Geneva, sans-serif;
• font-family : "MS Serif", "New York", serif;
• font-family : "Courier New", Courier, monospace;

Příklad

V následujícím příkladu je pro celou stránku nastaveno písmo Arial pokud písmo z nějakého důvodu nepůjde zobrazit zobrazí se druhé, nebo třetí.

body{font-family : Arial, Helvetica, sans-serif;}

Styl písma - font-style

Pomocí vlastnosti font-style se může nastavit styl písma a to buď kurzíva (font-style:italic) nebo skloněné písmo(font-style:oblique).

Možné hodnoty k nastavení stylu písma.

• normal
• italic
• oblique

Příklad

Podle následujícího příkladu se odstavce s třídou kurziva (p class="kurziva") zobrazí kurzívou.

p.kurziva{font-style : italic;}

Varianta písma - font-variant

Varianta písma umožňuje nastavit kapitálky nebo normální písmo(kapitálky to jsou velká písmena).

Možné hodnoty k nastavení varianty písma.

• normal
• small-caps

Příklad

Podle příkladu všechny odstavce s třídou kapital se zobrazí kapitálkami (velkými písmeny).

p.kapital{font-variant : small-caps; }

Duktus (tloušťka) písma - font-weight

Vlastnost font-weight nastavuje duktus písma (to znamená jak bude písmo silné). Písmo může být tlusté (bold), tlustší (bolder)nebo i tenčí (lighter).

Možné hodnoty k nastavení tloušťky písma.

• normal
• bold
• bolder
• lighter
• 100, 200, 300, 400, 500, 600, 700, 800, 900

Příklad

Podle následujícího příkladu se odstavce s třídou tucne zobrazí tučným písmem.

p.tucne{font-weight : bolder;}

Velikost písma - font-size

Pro nastavení velikosti písma doporučuji používat délkové jednotky. Pokud chcete aby šlo písmo zvětšovat používejte jednotku em jako v příkladu pokud budete chtít velikost nezvětšovací použijte pixely px a na tiskový výstup se nejvíce hodí jednotka pt.

Možné hodnoty k nastavení velikosti písma.

• procenta
• délky
• xx-small
• x-small
• small
• medium
• large
• x-large
• larger
• smaller

Příklad

Podle příkladu se odstavce zobrazí písmem o velikost 0.8em.

p{font-size : 0.8em;}

Reklama