CSS-Eigenschaft font-variant

Die Eigenschaft font-variant stellt den Text als normal oder Kapitälchen aus einer Schriftfamilie ein.

Die Eigenschaft font-variant wird durch zwei Werte angezeigt: normal und small-caps. Normal ist der Standardwert. Wenn wir Kapitälchen für einen Text auswählen, werden die Kleinbuchstaben zu den Großbuchstaben gemacht, aber diese konvertierten Buchstaben werden etwas kleiner als normale Großbuchstaben angezeigt.

Diese Eigenschaft wurde in CSS3 erweitert.
Anfangswert normal
Gilt für Alle Elemente. Es gilt auch für ::first-letter und ::first-line.
Geerbt Ja
Animierbar Nein
Version CSS1
DOM Syntax object.style.fontVariant = "normal";

Syntax

font-variant: normal | small-caps | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .smallcaps {
      font-variant: small-caps;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft Font-variant</h2>
    <p>Hier haben wir einen normalen Text verwendet, wie Sie sehen können.</p>
    <p class="smallcaps">Aber wir haben hier einen Text mit Kapitälchen verwendet.</p>
  </body>
</html>

Werte

Wert Beschreibung
normal Bedeutet, dass Textzeichen normal sind. Das ist der Standardwert dieser Eigenschaft.
small-cups Der Browser zeigt eine Schriftart mit Kapitälchen an.
initial Es stellt die Eigenschaft auf seinen Standardwert ein.
inherit Erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Übe dein Wissen

In welche Gruppen kann die CSS-Eigenschaft 'font-variant' in der Web-Programmierung unterteilt werden?
Finden Sie das nützlich?