Mit dieser font-variantEigenschaft können Sie den Zieltext in Kapitälchen ändern. Diese Eigenschaft wurde in CSS3 erweitert.
p:first-line ( font-variant: small-caps; /* default is `normal` */ )Vor CSS3 akzeptierte diese Eigenschaft einen von zwei möglichen Werten: normal(wie Text standardmäßig gerendert wird) und small-caps.
Ein Wert von small-capsrendert den Text in Großbuchstaben, die kleiner als normale Großbuchstaben sind. Dies überschreibt nicht die im Inhalt innerhalb des Markups festgelegten Großbuchstaben. Zum Beispiel:
In der obigen Demo sind beide Absätze auf gesetzt font-variant: small-caps. Der erste Absatz enthält nur den Großbuchstaben des ersten Buchstabens im Markup, sodass er wie erwartet angezeigt wird (Großbuchstabe des ersten Buchstabens, Rest in Kleinbuchstaben).
Die zweite Zeile wird im Markup in Großbuchstaben geschrieben, wodurch der small-capsWert überschrieben wird und alles in regulären Großbuchstaben festgelegt wird.
Wenn diese Absätze auf font-variant: small-capsund gesetzt sind text-transform: lowercase, werden sie in allen Kapitälchen angezeigt. Wenn diese Absätze auf font-variant: small-capsund gesetzt sind text-transform: uppercase, werden sie in allen regulären Großbuchstaben angezeigt.
font-variantkann als Teil einer fontKurzerklärung enthalten sein.
Neue Ergänzungen in CSS3
In CSS3, font-variantwird eine Abkürzung und kann mehrere Werte annehmen, einschließlich all-small-caps, petite-caps, all-petite-caps, titling-caps, und unicase, unter anderem.
Browser-Unterstützung
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Funktioniert | Funktioniert | Funktioniert | Funktioniert | Funktioniert | Funktioniert | Funktioniert |
Die in CSS3 hinzugefügten neuen Werte haben keine Browserunterstützung, daher zeigt die obige Tabelle die Unterstützung für einen Wert von small-caps.
In IE6 / 7 font-variant: small-capsbewirkt die Einstellung , dass jeder Text so eingestellt wird text-transform: uppercaseoder text-transform: lowercaseso aussieht text-transform: none.