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 ⁨Januar 2020⁩.

Die font-variant-caps CSS Eigenschaft steuert die Verwendung von alternativen Glyphen, die für Small oder Petite Capitals oder für Titelschrift 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;
}

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 unter Verwendung eines einzelnen Schlüsselwortwerts aus der nachstehenden Liste angegeben. In jedem Fall, wenn die Schriftart den OpenType-Wert nicht unterstützt, dann synthetisiert sie die Glyphen.

Werte

normal: Deaktiviert die Verwendung von alternativen Glyphen.
small-caps: Aktiviert die Anzeige von Small Capitals (OpenType-Funktion: smcp). Small-Caps-Glyphen verwenden typischerweise die Form von Großbuchstaben, werden jedoch in der Größe von Kleinbuchstaben angezeigt.
all-small-caps: Aktiviert die Anzeige von Small Capitals für Groß- und Kleinbuchstaben (OpenType-Funktionen: c2sc, smcp).
petite-caps: Aktiviert die Anzeige von Petite Capitals (OpenType-Funktion: pcap).
all-petite-caps: Aktiviert die Anzeige von Petite Capitals für Groß- und Kleinbuchstaben (OpenType-Funktionen: c2pc, pcap).
unicase: Aktiviert die Anzeige einer Mischung aus Small Capitals für Großbuchstaben mit normalen Kleinbuchstaben (OpenType-Funktion: unic).
titling-caps: Aktiviert die Anzeige von Titelschrift-Capitals (OpenType-Funktion: titl). Die Glyphen der Großbuchstaben sind oft dafür ausgelegt, zusammen mit Kleinbuchstaben verwendet zu werden. Wenn sie in vollständig großgeschriebenen Titelfolgen verwendet werden, können sie zu stark erscheinen. Titelschrift-Capitals sind speziell für diese Situation gestaltet.

Beschreibung

Wenn eine bestimmte Schriftart Glyphen von Großbuchstaben in mehreren verschiedenen Größen enthält, wählt diese Eigenschaft die am besten geeigneten aus. Wenn Petite-Capital-Glyphen nicht verfügbar sind, werden sie mit Small-Capital-Glyphen dargestellt. Wenn diese nicht vorhanden sind, synthetisiert der Browser sie aus den Großbuchstabenglyphen.

Schriftarten enthalten manchmal spezielle Glyphen für verschiedene zeichenlose Zeichen (wie Satzzeichen), um besser zu den umgebenden Großbuchstaben zu passen. Small-Capital-Glyphen werden jedoch nie für zeichenlose Zeichen synthetisiert.

Sprachspezifische Regeln

Diese Eigenschaft berücksichtigt sprachspezifische Regeln zur Großbuchstabendarstellung. Zum Beispiel:

In türkischen Sprachen, wie Türkisch (tr), Aserbaidschanisch (az), Krimtatarisch (crh), Wolga-Tatarisch (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 ß in Großbuchstaben zu ẞ (U+1E9E) werden.
Auf Griechisch (el) verlieren Vokale ihren Akzent, wenn das gesamte Wort in Großbuchstaben geschrieben wird (ά/Α), außer für das trennende Eta (ή/Ή). Auch Diphtonge mit einem Akzent auf dem ersten Vokal verlieren den Akzent und erhalten ein Diakritikum auf dem zweiten Vokal (άι/ΑΪ).

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

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 Small-Caps-Schriftvariante

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

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden