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 ke kterémukoli 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 najdete níže. Podívat se můžete také na přehled 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í písmo.

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

Styl písma - font-style

Pomocí vlastnosti font-style lze nastavit styl písma, a to buď kurzívu (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 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 (tedy to, jak bude písmo silné). Písmo může být tučné (bold), tučnější (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 chcete pevnou velikost, použijte pixely (px); pro 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 velikosti 0.8em.

p{font-size : 0.8em;}

Reklama