Met de font-varianteigenschap kunt u de beoogde tekst wijzigen in klein hoofdletters. Deze eigenschap is uitgebreid in CSS3.
p:first-line ( font-variant: small-caps; /* default is `normal` */ )Vóór CSS3 accepteerde deze eigenschap een van de twee mogelijke waarden: normal(hoe tekst standaard wordt weergegeven) en small-caps.
De waarde van small-capszal de tekst weergeven in hoofdletters die kleiner zijn dan gewone hoofdletters. Dit heeft geen voorrang op hoofdletters in de inhoud, binnen de opmaak. Bijvoorbeeld:
In de bovenstaande demo zijn beide alinea's ingesteld op font-variant: small-caps. De eerste alinea heeft alleen de eerste letter in hoofdletters in de opmaak, dus het wordt weergegeven zoals verwacht (eerste letter in hoofdletters, rest in kleine letters).
De tweede regel is in hoofdletters geschreven in de markup, die de small-capswaarde overschrijft en alles in gewone hoofdletters zet.
Als we dit verder gaan, als deze alinea's zijn ingesteld op font-variant: small-capsen text-transform: lowercase, dan verschijnen ze in allemaal small caps. Evenzo, als deze alinea's zijn ingesteld op font-variant: small-capsen text-transform: uppercase, worden ze in gewone hoofdletters weergegeven.
font-variantkan worden opgenomen als onderdeel van een fontsteno-verklaring.
Nieuwe toevoegingen in CSS3
In CSS3, font-variantwordt een verkorte en kan meerdere waarden, waaronder aanvaarden all-small-caps, petite-caps, all-petite-caps, titling-caps, en unicase, onder anderen.
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| Werken | Werken | Werken | Werken | Werken | Werken | Werken |
De nieuwe waarden die in CSS3 zijn toegevoegd, hebben geen browserondersteuning, dus de bovenstaande tabel vertegenwoordigt ondersteuning voor een waarde van small-caps.
In IE6 / 7 font-variant: small-capszorgt de instelling ervoor dat elke tekst die is ingesteld op text-transform: uppercaseof text-transform: lowercaseeruitziet zoals text-transform: none.