Táto font-variantvlastnosť umožňuje zmeniť zacielený text na malé písmená. Táto vlastnosť bola rozšírená v CSS3.
p:first-line ( font-variant: small-caps; /* default is `normal` */ )Pred CSS3 táto vlastnosť akceptovala jednu z dvoch možných hodnôt: normal(spôsob predvoleného vykresľovania textu) a small-caps.
Hodnota of small-capsvykreslí text veľkými písmenami, ktoré sú menšie ako bežné veľké písmená. Toto neprepíše veľké písmená nastavené v obsahu vo vnútri značky. Napríklad:
V ukážke vyššie sú oba odseky nastavené na font-variant: small-caps. Prvý odsek má v označení iba veľké prvé písmeno, takže sa zobrazuje podľa očakávania (veľké písmeno prvého písmena, zvyšok malými písmenami).
Druhý riadok je v značke napísaný veľkými písmenami, ktorý prepíše small-capshodnotu a nastaví všetko ako bežné veľké písmená.
Keď to posunieme ďalej, ak sú tieto odseky nastavené na font-variant: small-capsa text-transform: lowercase, potom sa zobrazia vo všetkých malých písmenách. Podobne, ak sú tieto odseky nastavené na font-variant: small-capsa text-transform: uppercase, potom sa zobrazia všetkými bežnými veľkými písmenami.
font-variantmožno zahrnúť ako súčasť fontstenografického vyhlásenia.
Nové prírastky v CSS3
V CSS3, font-variantstáva skrátený a môže prijať viac hodnôt, vrátane all-small-caps, petite-caps, all-petite-caps, titling-capsa unicase, medzi ostatnými.
Podpora prehľadávača
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Tvorba | Tvorba | Tvorba | Tvorba | Tvorba | Tvorba | Tvorba |
Nové hodnoty pridané do CSS3 nemajú podporu prehľadávača, takže vyššie uvedená tabuľka predstavuje podporu pre hodnotu small-caps.
V IE6 / 7 nastavenie font-variant: small-capsspôsobí, že akýkoľvek text nastavený na text-transform: uppercasealebo text-transform: lowercasebude vyzerať ako text-transform: none.