Font-variant
CSS vlastnost font-variant určuje kapitálky.
| hodnoty | kapitálky |
|---|---|
| normal | normální písmo |
| small-caps | kapitálky |
Kapitálky jsou velká písmena snížená/zmenšená na velikost malých písmen. Písmeno v původním textu velké si udržuje svoji velikost. Hodně se používají v anglosaských literaturách jako nadpisy kapitol (odtud název kapitálky).
Kapitálky jsou něco jiného než verzálky. Verzálky jsou obecně velká písmena. Pokud je text sázen verzálkami, jsou to prostě velká písmena. Dají se udělat pomocí text-transform: uppercase. Oproti tomu kapitálky jsou o poznání menší.
Moderní prohlížeče kreslí kapitálky správně, starší prohlížeče je často nahrazují verzálkami.
Podpora
Velmi dobře podporovaná vlastnost pokud jde o zvětšení písma. Pokud jde o vykreslování skutečných kapitálek, IE 4 a 5 kreslí verzálky (totéž, co text-transform: uppercase).
| Prohlížeč | Podpora ve verzích |
|---|---|
| Internet Explorer | perfektní |
| Firefox | perfektní |
| Opera | perfektní |
| Chrome | perfektní |
Příklady
Například se dá nastavit, že tag h3 (nadpis třetí úrovně) bude vykreslen tučnými kapitálkami:
<style>
h3 {font-variant: small-caps; font-weight: bold}
</style>
V tomto případě nebylo třeba tu tučnost zadávat, protože h3 je tučné normálně. Kdybych chtěl udělat netučné h3 kapitálkami:
<style>
h3 {font-variant: small-caps; font-weight: normal}
</style>
Důvodem, proč zmiňuji tento zdánlivě nesouvisející příklad s tučností, je to, že tučné kapitálky vypadají hodně jinak než netučné. Dalším vizuálním efektem, který se hodí ke kapitálkám, je prostrkání pomocí vlastnosti letter-spacing:
strong {font-variant: small-caps; font-weight: bold; letter-spacing: 1px}
Jednopixelové prostrkání je dostatečné na to, aby tučný text opticky odlehčilo.
Font-variant-numeric
Ještě zmíním vlastnost font-variant-numeric, která umožňuje nastavit, jak se mají zobrazovat číslice. Mohou mít pevnou šírku, což se hodí v tabulkách (font-variant-numeric: tabular-nums;) dají se s tím vykreslit zlomky nebo můžou být číslice posunuty nahoru a dolů jako ve starých textech (font-variant-numeric: oldstyle-nums;). Hodnot je ještě víc a protože je nepoužívám, tak si je někde najděte sami.
Reklama
