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, die für kleine oder zierliche Großbuchstaben oder für Überschriften 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 durch einen einzelnen Schlüsselwortwert aus der untenstehenden 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 Anzeige kleiner Großbuchstaben (OpenType Funktion: smcp). Kleine Großbuchstaben-Glyphen verwenden typischerweise die Form von Großbuchstaben, werden jedoch in der gleichen Größe wie Kleinbuchstaben angezeigt.
all-small-caps: Aktiviert die Anzeige von kleinen Großbuchstaben für sowohl Groß- als auch Kleinbuchstaben (OpenType Funktionen: c2sc, smcp).
petite-caps: Aktiviert die Anzeige zierlicher Großbuchstaben (OpenType Funktion: pcap).
all-petite-caps: Aktiviert die Anzeige zierlicher Großbuchstaben für sowohl Groß- als auch Kleinbuchstaben (OpenType Funktionen: c2pc, pcap).
unicase: Aktiviert die Anzeige einer Mischung aus kleinen Großbuchstaben für Großbuchstaben mit normalen Kleinbuchstaben (OpenType Funktion: unic).
titling-caps: Aktiviert die Anzeige von Überschrift-Großbuchstaben (OpenType Funktion: titl). Großbuchstabenglyphen sind oft für die Verwendung mit Kleinbuchstaben gestaltet. In rein groß geschriebenen Überschriften können sie zu stark wirken. Überschrift-Großbuchstaben sind speziell für diese Situation entworfen.

Beschreibung

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

Schriften enthalten manchmal spezielle Glyphen für verschiedene zeichenlose Zeichen (wie Satzzeichen), um besser zu den Großbuchstaben zu passen, die sie umgeben. Allerdings werden kleine Großbuchstabenglyphen niemals für zeichenlose Zeichen synthetisiert.

Sprachspezifische Regeln

Diese Eigenschaft berücksichtigt sprachspezifische Regeln zur Zeichenzuordnung. Zum Beispiel:

In turksprachigen 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 Buchstabenpaarungen: i/İ und ı/I.
Im Deutschen (de) kann das ß in Großbuchstaben zu ẞ (U+1E9E) werden.
Im Griechischen (el) verlieren Vokale ihren Akzent, wenn das ganze Wort in Großbuchstaben steht (ά/Α), außer bei der disjunktiven Eta (ή/Ή). Auch Diphthonge mit einem Akzent auf dem ersten Vokal verlieren den Akzent und gewinnen ein diakritisches Zeichen auf dem zweiten Vokal (άι/ΑΪ).

Barrierefreiheit

Große Textabschnitte mit einem font-variant Wert von all-small-caps oder all-petite-caps können für Personen mit kognitiven Einschränkungen 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

Anpassen 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