font-variant-caps

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Die font-variant-caps CSS Eigenschaft steuert die Verwendung von alternativen Glyphen, die für kleine oder petite Großbuchstaben oder für Überschriften verwendet werden.

Probieren Sie es aus

Wenn eine gegebene Schriftart Kapitalbuchstaben-Glyphen in mehreren unterschiedlichen Größen enthält, wählt diese Eigenschaft die am besten geeigneten aus. Falls keine petite Großbuchstaben-Glyphen verfügbar sind, werden sie mit kleinen Großbuchstaben-Glyphen dargestellt. Sind auch diese nicht vorhanden, synthesiert der Browser sie aus den Großbuchstaben-Glyphen.

Schriftarten enthalten manchmal spezielle Glyphen für verschiedene unspezifische Zeichen (wie Satzzeichen), um besser zu den sie umgebenden Großbuchstaben zu passen. Kleine Großbuchstaben-Glyphen werden jedoch nie für unspezifische Zeichen synthesiert.

Sprachspezifische Regeln

Diese Eigenschaft berücksichtigt sprachspezifische Regeln zur Groß-/Kleinschreibung. Zum Beispiel:

  • In Turksprachen, wie Türkisch (tr), Aserbaidschanisch (az), Krimtatarisch (crh), Wolgatatarisch (tt) und Baschkirisch (ba), gibt es zwei Arten von i (eines mit Punkt, eines ohne) und zwei Paarungen: i/İ und ı/I.
  • Im Deutschen (de) kann das ß im Großbuchstaben ẞ (U+1E9E) werden.
  • Im Griechischen (el) verlieren Vokale ihren Akzent, wenn das ganze Wort in Großbuchstaben steht (ά/Α), außer für das disjunktive eta (ή/Ή). Auch verlieren Diphthonge mit einem Akzent auf dem ersten Vokal den Akzent und erhalten ein diakritisches Zeichen auf dem zweiten Vokal (άι/ΑΪ).

Syntax

css
/* Keyword values */
font-variant-caps: normal;
font-variant-caps: small-caps;
font-variant-caps: all-small-caps;
font-variant-caps: petite-caps;
font-variant-caps: all-petite-caps;
font-variant-caps: unicase;
font-variant-caps: titling-caps;

/* Global values */
font-variant-caps: inherit;
font-variant-caps: initial;
font-variant-caps: revert;
font-variant-caps: revert-layer;
font-variant-caps: unset;

Die font-variant-caps Eigenschaft wird durch einen einzelnen Schlüsselwortwert aus der untenstehenden Liste angegeben. In jedem Fall, wenn die Schrift das OpenType-Feature nicht unterstützt, werden die Glyphen synthesiert.

Werte

normal

Deaktiviert die Verwendung von alternativen Glyphen.

small-caps

Ermöglicht die Anzeige von kleinen Großbuchstaben (OpenType-Funktion: smcp). Kleine Großbuchstaben-Glyphen verwenden typischerweise die Form von Großbuchstaben, werden aber in der Größe von Kleinbuchstaben angezeigt.

all-small-caps

Ermöglicht die Anzeige von kleinen Großbuchstaben für sowohl Groß- als auch Kleinbuchstaben (OpenType-Funktionen: c2sc, smcp).

petite-caps

Ermöglicht die Anzeige von petite Großbuchstaben (OpenType-Funktion: pcap).

all-petite-caps

Ermöglicht die Anzeige von petite Großbuchstaben für sowohl Groß- als auch Kleinbuchstaben (OpenType-Funktionen: c2pc, pcap).

unicase

Ermöglicht die Anzeige einer Mischung aus kleinen Großbuchstaben für Großbuchstaben mit normalen Kleinbuchstaben (OpenType-Funktion: unic).

titling-caps

Ermöglicht die Anzeige von Großbuchstaben für Überschriften (OpenType-Funktion: titl). Großbuchstaben-Glyphen sind oft für die Verwendung mit Kleinbuchstaben entworfen. Wenn sie in durchgehend großen Überschriftsequenzen verwendet werden, können sie zu stark erscheinen. Großbuchstaben für Überschriften sind speziell für diese Situation entworfen.

Barrierefreiheit

Große Textabschnitte, die mit einem font-variant Wert von all-small-caps oder all-petite-caps gesetzt sind, können für Menschen mit kognitiven Beeinträchtigungen wie Legasthenie schwer lesbar sein.

Formale Definition

Initialer Wertnormal
Anwendbar aufall elements and text. Auch anwendbar auf ::first-letter und ::first-line.
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

font-variant-caps = 
  normal           |
  small-caps       |
  all-small-caps   |
  petite-caps      |
  all-petite-caps  |
  unicase          |
  titling-caps

Beispiele

Einstellung der small-caps Schriftartvariante

HTML

html
<p class="small-caps">Firefox rocks, small caps!</p>
<p class="normal">Firefox rocks, normal caps!</p>

CSS

css
.small-caps {
  font-variant-caps: small-caps;
  font-style: italic;
}
.normal {
  font-variant-caps: normal;
  font-style: italic;
}

Ergebnis

Spezifikationen

Specification
CSS Fonts Module Level 4
# font-variant-caps-prop

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch