Med font-variantegenskapen kan du ändra den riktade texten till små bokstäver. Den här egenskapen har utökats i CSS3.
p:first-line ( font-variant: small-caps; /* default is `normal` */ )Innan CSS3 accepterade den här egenskapen ett av två möjliga värden: normal(hur text återges som standard) och small-caps.
Ett värde på small-capsger texten stora bokstäver som är mindre än vanliga versaler. Detta åsidosätter inte stora bokstäver i innehållet, inuti markeringen. Till exempel:
I ovanstående demo är båda styckena inställda på font-variant: small-caps. Det första stycket har bara den första bokstaven i markeringen, så den ser ut som förväntat (första bokstaven versaler, resten med små bokstäver).
Den andra raden är skriven i stora bokstäver i markeringen, vilket åsidosätter small-capsvärdet och ställer in allt i vanligt versal.
Om du tar detta vidare, om dessa stycken är inställda på font-variant: small-capsoch text-transform: lowercase, kommer de att visas i alla små bokstäver. På samma sätt, om dessa stycken är inställda på font-variant: small-capsoch text-transform: uppercase, kommer de att visas i vanliga versaler.
font-variantkan ingå som en del av en fontstenografideklaration.
Nya tillägg i CSS3
I CSS3, font-variantblir en förkortning och kan ta emot flera värden, inklusive all-small-caps, petite-caps, all-petite-caps, titling-caps, och unicase, bland annat.
Webbläsarstöd
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Arbetar | Arbetar | Arbetar | Arbetar | Arbetar | Arbetar | Arbetar |
De nya värdena som läggs till i CSS3 har inget webbläsarstöd, så tabellen ovan representerar stöd för ett värde på small-caps.
I IE6 / 7 kommer inställningen font-variant: small-capsatt göra att alla textinställningar som visas text-transform: uppercaseeller text-transform: lowercaseser ut som text-transform: none.