Den font-variantegenskapen kan du endre målrettet tekst til små caps. Denne egenskapen er utvidet i CSS3.
p:first-line ( font-variant: small-caps; /* default is `normal` */ )Før CSS3 godtok denne egenskapen en av to mulige verdier: normal(hvordan tekst gjengis som standard) og small-caps.
En verdi av small-capsvil gjengi teksten med store bokstaver som er mindre enn vanlige store bokstaver. Dette overstyrer ikke store bokstaver i innholdet, inne i markeringen. For eksempel:
I ovenstående demo er begge avsnitt satt til font-variant: small-caps. Første ledd har bare den første bokstaven i markeringen, så den ser ut som forventet (første bokstav, resten med små bokstaver).
Den andre linjen er skrevet i stor bokstav i markeringen, som overstyrer small-capsverdien, og setter alt i vanlig stor bokstav.
Hvis du tar dette videre, hvis disse avsnittene er satt til font-variant: small-capsog text-transform: lowercase, vil de vises i små bokstaver. På samme måte, hvis disse avsnittene er satt til font-variant: small-capsog text-transform: uppercase, vil de vises i vanlig bokstav.
font-variantkan inkluderes som en del av en fontstenografisk erklæring.
Nye tillegg i CSS3
I CSS3, font-variantblir en kortform og kan ta imot flere verdier, blant annet all-small-caps, petite-caps, all-petite-caps, titling-caps, og unicase, blant andre.
Nettleserstøtte
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| Virker | Virker | Virker | Virker | Virker | Virker | Virker |
De nye verdiene lagt til i CSS3 har ingen nettleserstøtte, så tabellen over representerer støtte for en verdi på small-caps.
I IE6 / 7 vil innstilling font-variant: small-capsføre til at tekst som er satt til text-transform: uppercaseeller text-transform: lowercaseser ut som text-transform: none.