Vlastnosti písma
font-family
Určuje druh písma. Hodnota je písmo, kterým chceme aby se text zobrazil. To se zapisuje jménem (Arial, Times New Roman). Problém nastane pokud uživatel námi definované písmo nemá nainstalované u sebe v počítači. Proto je dobré uvést písem více – pokud počítač písmo zná, použije ho, pokud ne, zkusí použít další v pořadí. Jako výchozí je nastaveno Times New Roman.
body {
font-family: "Times New Roman", Garamond, serif ;
}
V tomto případě vypíše počítač text písmem Times New Roman , jestliže ho nemá nainstalované tak písmem Garamond a pokud nemá ani to, použije jakékoli jiné patkové (serif) písmo.
Do uvozovek se dávají jen hodnoty, které obsahují mezeru.
| druh písma | popis | příklad písma |
|---|---|---|
| sans-serif | bezpatkové písmo | Arial, Helvetica, Verdana... |
| serif | patkové písmo | Times New Roman, Garamond... |
| monospace | psací stroj | Courier, Monaco... |
| fantasy | ozdobné písmo | Stencil, Western... |
| cursive | ručně psané písmo | Mistral, Zapf Chancery... |
font-style
p {
font-style: italic;
}
Určuje styl písma
| hodnota | popis | ukázka |
|---|---|---|
| normal | normální písmo | ukázka |
| italic | kurzíva (totéž jako <em>) |
ukázka |
| oblique | uměle skloněné písmo (taky kurzíva) | ukázka |
font-variant
p {
font-variant: small-caps;
}
Napíše text kapitálkami. Má pouze 2 hodnoty: normal – normální písmo a small-caps – kapitálky:
Ukázka kapitálek
font-weight
p {
font-weight: bold;
}
Definuje tučnost písma. Možností je spousta ale v praxi stejně stačí jen hodnoty normal a bold.
| hodnoty | tučnost písma |
|---|---|
| normal | písmo nebude tučné |
| bold | písmo bude tučné |
| 100 | co nejslabší, nejméně tučné písmo |
| 400 | normální písmo |
| 700 | písmo bude tučné jako je bold |
| 900 | písmo bude nejtučnější, co to jde |
| násobky 100 od 100 do 900 | různé stupně tučnosti |
| bolder | o něco tučnější, než by bylo, kdyby se to nezadalo |
| lighter | totéž co bolder , ale naopak |
font-size
p {
font-size: xx-small;
}
Nastaví velikost písma. Zde jsou tři typy hodnot.
Asi nejjednodušší jsou hodnoty smaller a larger. Ty značí, že dané písmo bude o stupeň větší (larger) nebo menší (smaller) než písmo ostatní (běžně 16 pixelů).
Další možností je použít klíčové slovo: [přehled]
| klíčové slovo | odpovídá stupni písma | velikost v pixelech |
|---|---|---|
| xx-small | 1 | 9 px |
| x-small | 2 | 10 px |
| small | 3 | 13 px |
| medium | 4 | 16 px |
| large | 5 | 18 px |
| x-large | 6 | 24 px |
| xx-large | 7 | 30 px |
| bez zadání | 4 | 16 px |
Poslední variantou je zadat velikost písma přesně v nějakých jednotkách.
line-height
p {
line-height: 200%;
}
Nastaví řádkování – vzdálenost mezi jednotlivými řádky textu (odborně proklad):
| hodnoty | výška řádku |
|---|---|
| normal | výška řádku bude normální - tak vysoká, jak je nejvyšší prvek na řádku |
| délka | výška řádku nastavená napevno, nejčastěji v pixelech |
| procento | procento normální výšky, např. line-height: 150% |
| číslo | násobek normální výšky, např. line-height: 1.5 |
font
Tato vlastnost je shrnutím všech předchozích. Obsahuje tedy font-style, font-variant, font-weight, font-size, line-height a font family. Jednotlivé údaje se oddělují mezerou (jen před line-height je nutné napsat zpětné lomítko "/")a musí se zadávat přesně v tomto pořadí. Pokud nějakou hodnotu změnit nechci, může se vynechat. Pouze line-height nefunguje pokud není nastaveno font-size.
Příklad zápisu:
p {
font: italic small-caps bold 12pt/150% "Arial ce", Heveltica, sans-serif ;
}
V tomto případě bude text psán kurzívou, kapitálkami, tučně, bude mít velikost 12 bodů, řádkování 150% a prohlížeč použije písmo Arial, popřípadě Heveltica a pokud ani jedno z nich nemá uživatel nainstalováno, tak nějaké jiné bezpatkové.
< Předchozí Následující >© 2006-2007 Petr Kuda - www.troska.cz