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 alternativer Glyphen für kleine oder Petite-Großbuchstaben oder für Titelschriften.

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 gegebene Schriftart Großbuchstabenglyphen in mehreren verschiedenen Größen enthält, wählt diese Eigenschaft die am besten geeigneten aus. Wenn Petite-Großbuchstabenglyphen nicht verfügbar sind, werden sie mit kleinen Großbuchstabenglyphen dargestellt. Wenn diese nicht vorhanden sind, werden sie vom Browser aus den Großbuchstabenglyphen synthetisiert.

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

Sprachspezifische Regeln

Diese Eigenschaft berücksichtigt sprachspezifische Regeln zur Umwandlung von Buchstaben. 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 Groß-/Kleinschreibungspaarungen: i/İ und ı/I.
Im Deutschen (de) kann das ß zu ẞ (U+1E9E) im Großbuchstaben werden.
Im Griechischen (el) verlieren Vokale ihren Akzent, wenn das ganze Wort in Großbuchstaben steht (ά/Α), außer beim disjunktiven 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 mit einem einzelnen Schlüsselwortwert aus der untenstehenden Liste spezifiziert. 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: Ermöglicht die Anzeige von kleinen Großbuchstaben (OpenType-Funktion: smcp). Kleine Großbuchstabenglyphen nutzen typischerweise die Form von Großbuchstaben, werden aber in der gleichen Größe wie 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 Titelschriften in Großbuchstaben (OpenType-Funktion: titl). Großbuchstabenglyphen sind oft so gestaltet, dass sie mit Kleinbuchstaben verwendet werden. Wenn sie in komplett großbuchstabigen Titelsequenzen verwendet werden, können sie zu stark wirken. Titelschriften wurden 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

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

Einstellung 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

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