CSS font-variant-caps Eigenschaft

Die CSS-Eigenschaft font-variant-caps steuert die Verwendung alternativer Glyphen für Großbuchstaben, wie Kapitälchen, Petit-Caps und Titelschrift-Caps. In CSS1 und CSS2 wurden diese über die umfassendere Eigenschaft font-variant ausgewählt; in CSS3 wurde font-variant zu einem Kurzschreibweise-Property und font-variant-caps als eigene Langform abgespalten.

Diese Seite erläutert, was jeder Wert bewirkt, wann man ihn einsetzen sollte, den Unterschied zwischen font-variant-caps und text-transform sowie den OpenType-Vorbehalt, der bestimmt, ob echte Kapitälchen oder ein Fallback angezeigt werden.

Die verfügbaren Werte sind:

normal
small-caps
all-small-caps
petite-caps
all-petite-caps
unicase
titling-caps

Wenn eine Schriftart Großbuchstaben-Glyphen in verschiedenen Größen enthält, wählt font-variant-caps die am besten geeigneten aus. Enthält eine Schriftart keine eigenen Kapitälchen-Glyphen, synthetisiert der Browser diese, indem er die regulären Großbuchstaben-Glyphen verkleinert — der Effekt funktioniert also immer, ein synthetisiertes Ergebnis sieht jedoch weniger poliert aus als echte entworfene Kapitälchen.

Das tatsächliche Rendering hängt daher von der OpenType-Feature-Unterstützung der Schriftart ab.

Warum font-variant-caps verwenden

Kapitälchen sind eine typografische Konvention, kein bloßer Stileffekt. Setzen Sie font-variant-caps ein, wenn Sie Folgendes möchten:

Akronyme und Abkürzungen (NASA, HTML, PDF) sollen optisch das gleiche Gewicht wie der umgebende Kleinbuchstabentext haben, anstatt in voller Höhe zu erscheinen.
Zwischenüberschriften, Autorenanzeigen oder die erste Zeile eines Artikels sollen sich abheben, ohne Schriftgröße oder -gewicht zu ändern.
Juristischen Text oder Kolumnentitel, bei denen eine gleichmäßige, feine Farbe über die gesamte Zeile wichtig ist.

Im Gegensatz zu text-transform: uppercase ändert font-variant-caps den zugrundeliegenden Text nicht — Screenreader lesen weiterhin die ursprüngliche Schreibweise, und das Ergebnis verwendet zweckentworfene Glyphen statt vergrößerter Großbuchstaben. Bevorzugen Sie font-variant-caps immer dann, wenn das Ziel typografischer Stil bei bereits korrekt geschriebenem Text ist.

Anfangswert	normal
Gilt für	Alle Elemente. Gilt auch für ::first-letter und ::first-line.
Vererbbar	Ja.
Animierbar	Nein.
Version	CSS3
DOM-Syntax	object.style.fontVariantCaps = "petite-caps";

Syntax

Syntax der CSS-Eigenschaft font-variant-caps

font-variant-caps: normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps;

Beispiel der font-variant-caps-Eigenschaft:

Beispiel der CSS-Eigenschaft font-variant-caps mit den Werten all-small-caps, small-caps und normal

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document </title>
    <style>
      .all-small-caps {
        font-variant-caps: all-small-caps;
      }
      .small-caps {
        font-variant-caps: small-caps;
      }
      .normal {
        font-variant-caps: normal;
      }
    </style>
  </head>
  <body>
    <h2>Font-variant-caps property example</h2>
    <p class="all-small-caps">
      The font-variant-caps CSS property controls the use of alternate glyphs for capital letters.
    </p>
    <p class="small-caps">Small caps!</p>
    <p class="normal">Normal caps!</p>
  </body>
</html>

Probier es selbst »

Ergebnis

![CSS font-variant-caps Eigenschaft](https://api.w3docs.com/uploads/media/default/0001/03/ceee914d009da29a1afecc4c3ff8691af0fdd54b.png "CSS font-variant-caps Eigenschaft mit small-caps, all-small-caps und normalem Text" =420x)

font-variant-caps vs. text-transform

Es ist leicht, font-variant-caps: small-caps mit text-transform: uppercase zu verwechseln. Sie sehen verwandt aus, verhalten sich aber unterschiedlich:

<!DOCTYPE html>
<html>
  <head>
    <title>small-caps vs. uppercase</title>
    <style>
      .smallcaps {
        font-variant-caps: small-caps;
      }
      .upper {
        text-transform: uppercase;
      }
    </style>
  </head>
  <body>
    <p class="smallcaps">The agency known as nasa.</p>
    <p class="upper">The agency known as nasa.</p>
  </body>
</html>

Im ersten Absatz werden die Kleinbuchstaben als Kapitälchen dargestellt, während der ursprüngliche Kleinbuchstabentext erhalten bleibt (ein Screenreader liest weiterhin „nasa"). Im zweiten wird jeder Buchstabe in volle Großbuchstabenhöhe gezwungen und der angezeigte Text lautet „THE AGENCY KNOWN AS NASA". Verwenden Sie font-variant-caps für typografische Verfeinerung und text-transform, wenn Sie tatsächlich die Groß-/Kleinschreibung ändern möchten.

Werte

Wert	Beschreibung
normal	Die Verwendung alternativer Glyphen wird nicht aktiviert.
small-caps	Zeigt Kapitälchen an. Kapitälchen-Glyphen haben die Form von Großbuchstaben, werden aber auf die Größe von Kleinbuchstaben reduziert.
all-small-caps	Zeigt Kapitälchen für sowohl Groß- als auch Kleinbuchstaben an.
petite-caps	Zeigt Petit-Caps an.
all-petite-caps	Zeigt Petit-Caps für sowohl Groß- als auch Kleinbuchstaben an.
unicase	Zeigt eine Mischung aus Kapitälchen für Großbuchstaben und normalen Kleinbuchstaben an.
titling-caps	Zeigt Titelschrift-Caps an.

Hinweis: initial und inherit sind CSS-weite Schlüsselwörter und können mit jeder CSS-Eigenschaft verwendet werden.

Browser-Kompatibilität

Browser	Unterstützung
Chrome	48+
Edge	79+
Firefox	34+
Safari	9.1+
Opera	35+

Hinweis: font-variant-caps ist Teil der Kurzschreibweise font-variant. Bei Verwendung der Kurzschreibweise sollte font-variant-caps explizit angegeben werden, um seinen Wert zu bewahren, da andere Kurzschreibweise-Werte ihn überschreiben können.

Übung

Was bewirkt die CSS-Eigenschaft 'font-variant-caps'?

Sie wird verwendet, um Text in Groß- oder Kleinbuchstaben umzuwandeln.Sie ermöglicht es dem Benutzer, die Großschreibung des Textes anzupassen.Sie wird verwendet, um die Stärke (Fettigkeit) der Schrift zu steuern.Sie bietet Kontrolle über die Verwendung alternativer Glyphen für Großbuchstaben und Kapitälchen.Sie ermöglicht die Verwendung einzigartiger Schriftstile.