Den font-variantegenskab giver dig mulighed for at ændre den målrettede tekst til small caps. Denne egenskab er blevet udvidet i CSS3.
p:first-line ( font-variant: small-caps; /* default is `normal` */ )Før CSS3 accepterede denne egenskab en af to mulige værdier: normal(hvordan tekst gengives som standard) og small-caps.
En værdi af small-capsgengiver teksten med store bogstaver, der er mindre end almindelige store bogstaver. Dette tilsidesætter ikke store bogstaver i indholdet inde i markeringen. For eksempel:
I ovenstående demo er begge afsnit indstillet til font-variant: small-caps. Første afsnit har kun det første store bogstav i markeringen, så det ser ud som forventet (første bogstav med store bogstaver, resten med små bogstaver).
Den anden linje er skrevet i al store bogstaver i markeringen, hvilket tilsidesætter small-capsværdien og indstiller alt i almindelig stor bogstav.
Hvis vi tager dette videre, hvis disse afsnit er indstillet til font-variant: small-capsog text-transform: lowercase, vises de i alle små bogstaver. Tilsvarende, hvis disse afsnit er indstillet til font-variant: small-capsog text-transform: uppercase, så vises de i almindelig stor bogstav.
font-variantkan medtages som en del af en fontstenografisk erklæring.
Nye tilføjelser i CSS3
I CSS3, font-variantbliver en stenografi og kan acceptere flere værdier, herunder all-small-caps, petite-caps, all-petite-caps, titling-caps, og unicase, blandt andre.
Browsersupport
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Arbejder | Arbejder | Arbejder | Arbejder | Arbejder | Arbejder | Arbejder |
De nye værdier, der er tilføjet i CSS3, har ingen browsersupport, så tabellen ovenfor repræsenterer understøttelse af en værdi på small-caps.
I IE6 / 7 vil indstilling font-variant: small-capsfå enhver tekst, der er indstillet til text-transform: uppercaseeller text-transform: lowercasetil at virke som text-transform: none.