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 (en-US) und ::first-line (en-US).
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 (en-US).
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 (en-US).

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.		 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

BCD tables only load in the browser

Siehe auch