font-variant

Übersicht

Die CSS-Eigenschaft font-variant erlaubt die Darstellung der Schrift in Kapitälchen, Kleinbuchstaben in der Form von Großbuchstaben.

Initialwertnormal
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter und ::first-line.
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Syntax

Formal syntax: normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero || <east-asian-variant-values> || <east-asian-width-values> || ruby ]

wobei
<common-lig-values> = [ common-ligatures | no-common-ligatures ]
<discretionary-lig-values> = [ discretionary-ligatures | no-discretionary-ligatures ]
<historical-lig-values> = [ historical-ligatures | no-historical-ligatures ]
<contextual-alt-values> = [ contextual | no-contextual ]
<feature-value-name> = <custom-ident>
<numeric-figure-values> = [ lining-nums | oldstyle-nums ]
<numeric-spacing-values> = [ proportional-nums | tabular-nums ]
<numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ]
<east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]
<east-asian-width-values> = [ full-width | proportional-width ]

font-variant: normal;
font-variant: small-caps;
font-variant: common-ligatures small-caps; 

font-variant: inherit;
font-variant: initial;
font-variant: unset;

Werte

normal
Normale Schrift.
small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps
Stellt die Schrift in verschiedenen Arten von Kapitälchen dar, entsprechend font-variant-caps.
Falls dies von der Schriftart nicht unterstützt wird, stellt Gecko den Effekt nach, indem die Kleinbuchstaben durch verkleinerte Grossbuchstaben ersetzt werden.

Der Wert small-caps hat in einigen Sprachen weitergehende Auswirkungen:

  • In Turksprachen (wie Türkisch (tr), Aserbaidschanisch (az), Krimtatarisch (crh), Tatarisch (tt) und Baschkirisch (ba)), gibt es zwei verschiedene Buchstaben i, einen mit und einen ohne Punkt, und somit auch zwei verschiedene Buchstabenpaare: i/İ und ı/I.
  • Im Deutschen (de) wird das ß zu SS.
  • Im Griechischen (el) verlieren Vokale ihren Akzent, wenn sie großgeschrieben sind (ά/Α), eine Ausnahme ist Eta (ή/Ή). Auch Diphthongen mit einem Akzent im ersten Vokal verliern diesen, dafür erhält der zweite Vokal einen (άι/ΑΪ).

Die Sprache wird in HTML mit dem Attribut  lang und in XML mit xml:lang definiert.

Diese spezifischen Anpassungen werden nicht von allen Browsern unterstützt, siehe Browserkompatibilität.

Beispiel

HTML

<p class="normal">Firefox rocks!</p>
<p class="small">Firefox rocks!</p>

CSS

p.normal {
  font-variant: normal;
}
p.small {
  font-variant: small-caps;
}

Result

Spezifikation

Spezifikation Status Anmerkung
CSS Fonts Module Level 3
Die Definition von 'font-variant' in dieser Spezifikation.
Anwärter Empfehlung Sammeleigenschaft für font-variant-* (in diesem Artikel noch nicht beschrieben).
CSS Level 2 (Revision 1)
Die Definition von 'font-variant' in dieser Spezifikation.
Empfehlung Keine Änderung
CSS Level 1
Die Definition von 'font-variant' in dieser Spezifikation.
Empfehlung

Browserkompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
font-variantChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 4Opera Vollständige Unterstützung 3.5Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung 1Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 11Safari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung 1.0
CSS Fonts Module Level 3 shorthandChrome Vollständige Unterstützung 52Edge Vollständige Unterstützung 79Firefox Vollständige Unterstützung 34
Vollständige Unterstützung 34
Keine Unterstützung 33 — 34
Deaktiviert
Deaktiviert From version 33 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Keine Unterstützung NeinOpera Vollständige Unterstützung 39Safari Vollständige Unterstützung 9.1WebView Android Vollständige Unterstützung 52Chrome Android Vollständige Unterstützung 52Firefox Android Vollständige Unterstützung 34
Vollständige Unterstützung 34
Keine Unterstützung 33 — 34
Deaktiviert
Deaktiviert From version 33 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Vollständige Unterstützung 41Safari iOS Vollständige Unterstützung 9.3Samsung Internet Android Vollständige Unterstützung 6.0
Greek accented charactersChrome Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise Some operating systems may correctly omit accents in all-uppercase Greek text.
Edge Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise Some operating systems may correctly omit accents in all-uppercase Greek text.
Firefox Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise Some operating systems may correctly omit accents in all-uppercase Greek text.
IE Keine Unterstützung NeinOpera Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise Some operating systems may correctly omit accents in all-uppercase Greek text.
Safari Keine Unterstützung NeinWebView Android Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise Some operating systems may correctly omit accents in all-uppercase Greek.
Chrome Android Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise Some operating systems may correctly omit accents in all-uppercase Greek text.
Firefox Android Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise Some operating systems may correctly omit accents in all-uppercase Greek text.
Opera Android Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise Some operating systems may correctly omit accents in all-uppercase Greek text.
Safari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise Some operating systems may correctly omit accents in all-uppercase Greek text.
iİ and ıIChrome Vollständige Unterstützung 31Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 14IE Vollständige Unterstützung 4Opera Vollständige Unterstützung 18Safari Vollständige Unterstützung 8WebView Android Vollständige Unterstützung ≤37Chrome Android Vollständige Unterstützung 31Firefox Android Vollständige Unterstützung 14Opera Android Vollständige Unterstützung 18Safari iOS Vollständige Unterstützung 8Samsung Internet Android Vollständige Unterstützung 2.0
ßSSChrome Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise Some operating systems may capitalize ß as SS.
Edge Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise Some operating systems may capitalize ß as SS.
Firefox Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise Some operating systems may capitalize ß as SS.
IE Keine Unterstützung NeinOpera Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise Some operating systems may capitalize ß as SS.
Safari Keine Unterstützung NeinWebView Android Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise Some operating systems may capitalize ß as SS.
Chrome Android Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise Some operating systems may capitalize ß as SS.
Firefox Android Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise Some operating systems may capitalize ß as SS.
Opera Android Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise Some operating systems may capitalize ß as SS.
Safari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise Some operating systems may capitalize ß as SS.

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Benutzer muss dieses Feature explizit aktivieren.
Benutzer muss dieses Feature explizit aktivieren.

Siehe auch