CSS font-variant-Eigenschaft

Die Eigenschaft font-variant legt fest, ob Text normal oder in Small Caps dargestellt wird.

Die Eigenschaft font-variant kann zwei Werte annehmen: normal und small-caps. normal ist der Standardwert. Wenn wir für einen Text small-caps auswählen, werden Kleinbuchstaben in Großbuchstaben umgewandelt, diese werden jedoch etwas kleiner als normale Großbuchstaben dargestellt.

Die Eigenschaft font-variant kann als Teil einer font-Kurzschreibweise verwendet werden.

INFO

Diese Eigenschaft wurde in CSS Fonts Module Level 4 erweitert. In modernem CSS kann die Eigenschaft font-variant mehrere zusätzliche Werte annehmen (z. B. petite-caps, all-petite-caps, all-small-caps, titling-caps). Beachten Sie, dass die Browserunterstützung für diese modernen Werte variieren kann.

Anfangswert	normal
Gilt für	Alle Elemente. Gilt auch für ::first-letter und ::first-line.
Vererbbar	Ja.
Animierbar	Nein.
Version	CSS1
DOM-Syntax	object.style.fontVariant = "normal"; `<br>`(Hinweis: `fontVariant` ist der camelCase-JavaScript-Eigenschaftsname für `font-variant`.)

Syntax

Syntax der CSS font-variant-Eigenschaft

css

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

Beispiel für die font-variant-Eigenschaft:

Beispiel für die CSS font-variant-Eigenschaft mit small-caps

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .smallcaps {
        font-variant: small-caps;
      }
    </style>
  </head>
  <body>
    <h2>Font-variant property example</h2>
    <p>Here we used a normal text as you can see.</p>
    <p class="smallcaps">However, this text uses small-caps.</p>
  </body>
</html>

Try it Yourself »

Ergebnis

CSS font-variant Property

Werte

Wert	Beschreibung	Testen
normal	Bedeutet, dass Textzeichen normal dargestellt werden. Dies ist der Standardwert dieser Eigenschaft.	Testen »
small-caps	Wandelt Kleinbuchstaben in Großbuchstaben um, zeigt sie jedoch in einer kleineren Größe als reguläre Großbuchstaben an.	Testen »
all-small-caps	Wandelt alle Buchstaben in Small Caps um.	Testen »
titling-caps	Zeigt Text in Titling Caps an, typischerweise für Titel verwendet.	Testen »
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.	Testen »
inherit	Erbt den Eigenschaftswert vom Elternelement.

Practice

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

Sie legt die Grundlinie einer Schrift fest.Sie legt fest, ob ein Text in Small Caps dargestellt werden soll.Sie ändert den Abstand zwischen den Buchstaben.Sie ist eine Kurzschreibweise für 'font-variant-caps', 'font-variant-numeric', 'font-variant-alternates', 'font-variant-ligatures' und 'font-variant-east-asian'.Sie bestimmt die Höhe einer Zeile.

CSS font-variant-Eigenschaft ​

Syntax ​

Beispiel für die font-variant-Eigenschaft: ​

Ergebnis ​