Kapitälchen in CSS mit font-variant

In CSS hat man mehrere Möglichkeiten, um bestimmte Textbereiche vom übrigen Text hervorzuheben. Dazu zählen auch die Kapitälchen. Damit kann man Texte in Großbuchstaben darstellen, wobei die Größe sich an denen von Kleinbuchstaben orientiert. Großbuchstaben am Anfang von Wörtern werden dabei etwas vergrößert dargestellt.

Kapitälchen mit CSS

Um Texte mit Kapitälchen darzustellen, kann man in CSS die Eigenschaft font-variant verwenden. Nachfolgend ist ein Beispielcode abgebildet, aus dem die Syntax entnommen werden kann.

CSS-Code mit font-variant

Werte für font-variant

Die Eigenschaft font-variant ist im Grunde nur für Kapitälchen. Daher gibt es nicht viele Werte, die man angeben kann.

  • normal (Standard, normaler Schriftvariante)
  • small-caps (Für Kapitälchen)
  • initial (Setzt auf den Standardwert)
  • inherit (Vererbt vom Elternelement)

Ein Beispielcode und die Abbildung von der Darstellung im Browser ist nachfolgend.

.selektor1 {
font-family: Arial;
}

.selektor2 {
font-family: Arial;
font-variant: small-caps;
}
<p class="selektor1">Text beim .selektor1</p>
<p class="selektor2">Text beim .selektor2</p>
font-variant: small-caps

Aus der Abbildung kann man erkennen, dass beim Vergleich mit einer normalen Schrift die Buchstaben beim Kapitälchen etwas verkleinert wirken, obwohl sie in Großbuchstaben dargestellt werden.