Übersicht

The CSS Eigenschaft font-variant property selects a normal, or small-caps face from a font family. Setting font-variant is also possible by using the font shorthand.

Initialwertnormal
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter und ::first-line.
VererbtJa
Medienvisuell
Berechneter Wertwie angegeben
Animationstypdiskret
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

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: inherit

Werte

normal
Normale Schrift.
small-caps
Stellt die Schrift in Kapitälchen dar. Falls dies von der Schriftart nicht unterstützt wird, stellt Gecko den Effekt nach, indem die Kleinbuchstaben durch skalierte Grossbuchstaben ersetzt werden.

Der Wert small-caps hat in einigen Sprachen eine spezifische Wirkung:

  • In turkischen Sprachen (wie Türkisch (tr), Aserbaidschanisch (az), Krimtataren (crh), Tatarisch (tt) und Baschkirisch (ba)), gibt es zwei verschiedene Buchstaben i, eines mit und eines 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 Grossgeschriben sind (ά/Α), mit Ausnahme von 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 HTML und in XML mit xml:lang definiert.

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

Beispiele

p {
  font-variant: small-caps;
}

Spezifikation

Spezifikation Status Anmerkung
CSS Fonts Module Level 3
Die Definition von 'font-variant' in dieser Spezifikation.
Anwärter Empfehlung Extends the property (this is not yet reflected in this article)
CSS Level 2 (Revision 1)
Die Definition von 'font-variant' in dieser Spezifikation.
Empfehlung No change.
CSS Level 1
Die Definition von 'font-variant' in dieser Spezifikation.
Empfehlung  

Browser Kompatibilitä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 Ja
ßSSChrome Vollständige Unterstützung JaEdge Keine Unterstützung NeinFirefox Vollständige Unterstützung 1IE Keine Unterstützung NeinOpera Vollständige Unterstützung JaSafari Keine Unterstützung NeinWebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Keine Unterstützung NeinSamsung Internet Android Vollständige Unterstützung Ja
iİ and ıIChrome Vollständige Unterstützung JaEdge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 14IE Vollständige Unterstützung 4Opera Vollständige Unterstützung JaSafari Vollständige Unterstützung JaWebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 14Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung JaSamsung Internet Android Vollständige Unterstützung Ja
Greek accented charactersChrome Vollständige Unterstützung JaEdge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 15IE Vollständige Unterstützung 4Opera Vollständige Unterstützung JaSafari Vollständige Unterstützung JaWebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 15Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung JaSamsung Internet Android Vollständige Unterstützung Ja
CSS Fonts Module Level 3 shorthandChrome Vollständige Unterstützung 52Edge Keine Unterstützung NeinFirefox 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 Ja

Legende

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

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: mdnwebdocs-bot, SJW, fscholz, Sebastianz
Zuletzt aktualisiert von: mdnwebdocs-bot,