`font-variant-caps` CSS property

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Die font-variant-caps CSS-Eigenschaft steuert die Verwendung alternativer Glyphen für kleine oder zierliche Großbuchstaben oder für Überschriften.

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;

Werte

Diese Eigenschaft wird als eines der folgenden Schlüsselwortwerte angegeben:

normal: Deaktiviert die Verwendung alternativer Glyphen.
small-caps: Aktiviert die Anzeige von Kapitälchen (OpenType-Feature: smcp). Kapitälchen-Glyphen verwenden typischerweise die Form von Großbuchstaben, werden jedoch in derselben Größe wie Kleinbuchstaben angezeigt.
all-small-caps: Aktiviert die Anzeige von Kapitälchen sowohl für Groß- als auch Kleinbuchstaben (OpenType-Features: c2sc, smcp).
petite-caps: Aktiviert die Anzeige von zierlichen Großbuchstaben (OpenType-Feature: pcap).
all-petite-caps: Aktiviert die Anzeige von zierlichen Großbuchstaben sowohl für Groß- als auch Kleinbuchstaben (OpenType-Features: c2pc, pcap).
unicase: Aktiviert die Anzeige einer Mischung aus Kapitälchen für Großbuchstaben mit normalen Kleinbuchstaben (OpenType-Feature: unic).
titling-caps: Aktiviert die Anzeige von Überschriftengroßbuchstaben (OpenType-Feature: titl). Großbuchstabenglyphen werden oft für die Verwendung mit Kleinbuchstaben entworfen. Wenn sie in allen Großbuchstaben-Überschriftenfolgen verwendet werden, können sie zu stark erscheinen. Überschriftengroßbuchstaben sind speziell für diese Situation entworfen.

Beschreibung

Die font-variant-caps-Eigenschaft steuert die Verwendung alternativer Glyphen für kleine oder zierliche Großbuchstaben oder für Überschriften.

Wenn eine Schriftart Großbuchstabenglyphen in mehreren unterschiedlichen Größen umfasst, wählt diese Eigenschaft die am besten geeigneten aus. Wenn zierliche Großbuchstabenglyphen nicht verfügbar sind, werden sie mit Kapitälchenglyphen gerendert. Sind auch diese nicht vorhanden, synthetisiert der Browser sie aus den Großbuchstabenglyphen.

Der Wert ist ein einzelnes Schlüsselwort. Für jeden Wert, wenn die Schriftart das OpenType-Feature nicht unterstützt, dann werden die Glyphen synthetisiert. Schriftarten beinhalten manchmal spezielle Glyphen für verschiedene zeichenlose Zeichen (wie Satzzeichen), um die besser zu den umgebenden Großbuchstaben passen. Allerdings werden Kapitälchenglyphen niemals für zeichenlose Zeichen synthetisiert.

Sprachspezifische Regeln

Diese Eigenschaft berücksichtigt sprachspezifische Regeln zur Groß- und Kleinschreibung. Beispielsweise:

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 von Groß- und Kleinbuchstaben: i/İ und ı/I.
Im Deutschen (de) kann ß zu ẞ (U+1E9E) in Großbuchstaben werden.
Im Griechischen (el) verlieren Vokale ihre Akzentuierung, wenn das ganze Wort in Großbuchstaben ist (ά/Α), außer beim disjunktiven Eta (ή/Ή). Auch Diphthonge 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 Personen mit kognitiven Schwierigkeiten wie Legasthenie schwer zu lesen 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 Schriftvarianten-Kapitälchen

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

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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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

font-variant-caps CSS property

HTML

CSS

Ergebnis

Help improve MDN

`font-variant-caps` CSS property