font-variant

Ü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
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
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 NeinFirefox 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.
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 JaSafari 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 JaSafari iOS Vollständige Unterstützung 8Samsung Internet Android Vollständige Unterstützung Ja
ßSSChrome Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise Some operating systems may capitalize ß as SS.
Edge Keine Unterstützung NeinFirefox 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