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 zierliche Großbuchstaben oder für Titel verwendet werden.

Probieren Sie es aus

font-variant-caps: normal;

font-variant-caps: small-caps;

font-variant-caps: all-small-caps;

<section id="default-example">
  <div id="example-element">
    <p>Difficult waffles</p>
  </div>
</section>

@font-face {
  font-family: "Fira Sans";
  src:
    local("FiraSans-Regular"),
    url("/shared-assets/fonts/FiraSans-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

section {
  font-family: "Fira Sans", sans-serif;
  margin-top: 10px;
  font-size: 1.5em;
}

Wenn eine Schriftart Großbuchstabenglyphen in mehreren verschiedenen Größen enthält, wählt diese Eigenschaft die am besten geeigneten aus. Wenn zierliche Kapitälchen nicht verfügbar sind, werden sie mit kleinen Kapitälchenglyphen dargestellt. Wenn diese nicht vorhanden sind, werden sie vom Browser aus den Großbuchstabenglyphen synthetisiert.

Schriftarten enthalten manchmal spezielle Glyphen für verschiedene schriftzeichenlose Zeichen (wie Interpunktionszeichen), um besser zu den umgebenden Großbuchstaben zu passen. Allerdings werden kleine Kapitälchenglyphen niemals für schriftzeichenlose Zeichen synthetisiert.

Sprachspezifische Regeln

Diese Eigenschaft berücksichtigt sprachspezifische Groß- und Kleinschreibungsregeln. Zum Beispiel:

In türkischen Sprachen, wie Türkisch (tr), Aserbaidschanisch (az), Krimtatarisch (crh), Wolgatatarisch (tt) und Baschkirisch (ba), gibt es zwei Arten von i (eins mit Punkt, eins ohne) und zwei Groß-/Kleinschreibungspaare: i/İ und ı/I.
Im Deutschen (de) kann das ß in Großbuchstaben zu ẞ (U+1E9E) werden.
Im Griechischen (el) verlieren Vokale ihre Akzentuierung, wenn das ganze Wort in Großbuchstaben steht (ά/Α), mit Ausnahme des disjunktiven Eta (ή/Ή). Auch Diphthonge mit Akzent auf dem ersten Vokal verlieren den Akzent und erhalten einen diakritischen Akzent 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 einzigen Schlüsselwortwert aus der unten stehenden Liste angegeben. In jedem Fall, wenn die Schriftart den OpenType-Wert nicht unterstützt, werden die Glyphen synthetisiert.

Werte

normal: Deaktiviert die Verwendung alternativer Glyphen.
small-caps: Aktiviert die Darstellung von kleinen Kapitälchen (OpenType-Funktion: smcp). Kleine Kapitälchenglyphen verwenden typischerweise die Form von Großbuchstaben, werden jedoch in der gleichen Größe wie Kleinbuchstaben angezeigt.
all-small-caps: Aktiviert die Darstellung von kleinen Kapitälchen sowohl für Groß- als auch Kleinbuchstaben (OpenType-Funktionen: c2sc, smcp).
petite-caps: Aktiviert die Darstellung von zierlichen Kapitälchen (OpenType-Funktion: pcap).
all-petite-caps: Aktiviert die Darstellung von zierlichen Kapitälchen sowohl für Groß- als auch Kleinbuchstaben (OpenType-Funktionen: c2pc, pcap).
unicase: Aktiviert die Darstellung von kleinen Kapitälchen für Großbuchstaben und normalen Kleinbuchstaben (OpenType-Funktion: unic).
titling-caps: Aktiviert die Darstellung von Großbuchstaben für Titel (OpenType-Funktion: titl). Großbuchstabenglyphen sind oft für die Verwendung mit Kleinbuchstaben gestaltet. Wenn sie in vollständig großgeschriebenen Titelreihenfolgen verwendet werden, können sie zu stark wirken. Titelkapitälchen sind speziell für diese Situation gestaltet.

Barrierefreiheit

Große Textabschnitte, die mit einem font-variant Wert von all-small-caps oder all-petite-caps gesetzt sind, können es Menschen mit kognitiven Beeinträchtigungen wie Dyslexie erschweren, den Text zu lesen.

Formale Definition

Anfangswert	`normal`
Anwendbar auf	all elements and text. Auch anwendbar auf `::first-letter` und `::first-line`.
Vererbt	Ja
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

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

Beispiele

Festlegen der Schriftvariante small-caps

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