font-variantVlastnost umožňuje měnit cílovou text na malé kapitálky. Tato vlastnost byla rozšířena v CSS3.
p:first-line ( font-variant: small-caps; /* default is `normal` */ )Před CSS3 tato vlastnost přijala jednu ze dvou možných hodnot: normal(jak se text vykresluje ve výchozím nastavení) a small-caps.
Hodnota of small-capsvykreslí text velkými písmeny, která jsou menší než běžná velká písmena. Tím se nepřepíše sada velkých písmen v obsahu uvnitř značky. Například:
Ve výše uvedeném ukázce jsou oba odstavce nastaveny na font-variant: small-caps. První odstavec má ve značce pouze první písmeno velkými písmeny, takže se zobrazí podle očekávání (první písmeno velké písmeno, zbytek malými písmeny).
Druhý řádek je zapsán velkými písmeny ve značce, což přepíše small-capshodnotu a vše nastaví na normální velká písmena.
Pokud to vezmeme dále, pokud jsou tyto odstavce nastaveny na font-variant: small-capsa text-transform: lowercase, pak se zobrazí ve všech malých písmenech . Podobně, pokud jsou tyto odstavce nastaveny na font-variant: small-capsa text-transform: uppercase, pak se zobrazí ve všech běžných velkých písmech.
font-variantlze zahrnout jako součást fontzkratkové deklarace.
Nové přírůstky v CSS3
V CSS3, font-variantstává zkrácený a může přijmout více hodnot, včetně all-small-caps, petite-caps, all-petite-caps, titling-capsa unicase, mezi ostatními.
Podpora prohlížeče
| Chrome | Safari | Firefox | Opera | TJ | Android | iOS |
|---|---|---|---|---|---|---|
| Funguje | Funguje | Funguje | Funguje | Funguje | Funguje | Funguje |
Nové hodnoty přidané do CSS3 nemají žádnou podporu prohlížeče, takže výše uvedená tabulka představuje podporu pro hodnotu small-caps.
V IE6 / 7 font-variant: small-capszpůsobí nastavení jakýkoli text nastavený na text-transform: uppercasenebo text-transform: lowercasevypadat jako text-transform: none.