Die Eigenschaft font-variant-numeric

Die Eigenschaft font-variant-numeric übernimmt die Kontrolle über die Verwendung alternativer Glyphen für Zahlen, Brüche und Ordnungsmarker.

Anfangswert normal
Gilt für Alle Elemente. Es gilt auch für ::first-letter und ::first-line.
Geerbt Ja
Animierbar Diskret
Version CSS3
DOM Syntax object.style.fontVariantNumeric = "slashed-zero";

Syntax

font-variant-numeric: normal | <numeric-figure-values> | <numeric-spacing-values> | <numeric-fraction-values> | ordinal | slashed-zero;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .p1 {
      font-variant-numeric: oldstyle-nums;
      }
      .p2 {
      font-variant-numeric: diagonal-fractions;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft Font-variant-numeric</h2>
    <p class="p1">001528931</p>
    <p class="p2">952321313500</p>
  </body>
</html>

Werte

Wert Beschreibung
normal Die Verwendung alternativer Glyphen ist nicht möglich.
<numeric-figure-values> Steuert die Zahlen, die für Zahlen verwendet werden.
<numeric-spacing-values> Steuert die Größe der Zahlen, die für Zahlen verwendet wird.
<numeric-fraction-values> Steuert die Glyphen, die für Brüche verwendet werden.
ordinal Erzwingt die Verwendung spezieller Glyphen für die Ordinalmarker, wie z. B. 1., 2., 3. Es entspricht den Werten OpenType.
slashed-zero Erzwingt die Verwendung einer 0 mit einem Schrägstrich. Das ist erforderlich, wenn O und 0 nicht unterschieden werden. Sie entspricht den OpenType-Werten Null
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
52.0+ 34.0+ 9.1+ 39.0+

Übe dein Wissen

Was ist die Funktion der Eigenschaft 'font-variant-numeric' in CSS?