font-variant - CSS

Übersicht

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

Initialwert	`normal`
Anwendbar auf	alle Elemente. Auch anwendbar auf `::first-letter` und `::first-line`.
Vererbt	Ja
Berechneter Wert	wie angegeben
Animationstyp	diskret

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

BCD tables only load in the browser

Siehe auch

text-transform