CSS font-variant-numeric-Eigenschaft

Die Eigenschaft font-variant-numeric unterstützt das OpenType-Schriftformat und ermöglicht die Steuerung der Verwendung alternativer Glyphen für Zahlen, Brüche und Ordinalmarker.

Zahlen können Varianten wie Ordinalzahlen (z. B. 1.) oder Brüche (z. B. 1/2) aufweisen. Im Gegensatz zu Buchstaben verändern sie nicht die Bedeutung des Inhalts, aber diese Variationen fügen zusätzlichen Kontext hinzu und können sich auf die Lesbarkeit auswirken.

Die Hauptbeschränkung besteht darin, dass nur eine begrenzte Anzahl von Schriftarten font-variant-numeric und font-variant vollständig unterstützt. Es gibt zwar eine große Anzahl OpenType-kompatibler Schriftarten, aber nur wenige Optionen nutzen alle Funktionen von font-variant-numeric.

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

Syntax

Syntax der CSS-Eigenschaft font-variant-numeric

css

font-variant-numeric: normal | &lt;numeric-figure-values&gt; | &lt;numeric-spacing-values&gt; | &lt;numeric-fraction-values&gt; | ordinal | slashed-zero;

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

Beispiel für die CSS-Eigenschaft font-variant-numeric mit den Werten oldstyle-nums und diagonal-fractions

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document </title>
    <style>
      .p1 {
        font-variant-numeric: oldstyle-nums;
      }
      .p2 {
        font-variant-numeric: diagonal-fractions;
      }
    </style>
  </head>
  <body>
    <h2>Font-variant-numeric property example</h2>
    <p class="p1">001528931</p>
    <p class="p2">1/2</p>
  </body>
</html>

Try it Yourself »

Ergebnis

CSS font-variant-numeric Property

Werte

Wert	Beschreibung
normal	Alternative Glyphen sind nicht aktiviert.
`<numeric-figure-values>`	Steuert den Ziffernstil. Schlüsselwörter: `lining-nums`, `oldstyle-nums`.
`<numeric-spacing-values>`	Steuert die Zeichenabstandsbreite. Schlüsselwörter: `proportional-nums`, `tabular-nums`.
`<numeric-fraction-values>`	Steuert den Bruchstil. Schlüsselwörter: `diagonal-fractions`, `stacked-fractions`.
ordinal	Ersetzt Ziffern durch hochgestellte Ordinalglyphen (z. B. ¹ˢᵗ, ²ⁿᵈ), anstatt Text wie „st“ oder „nd“ hinzuzufügen. Entspricht OpenType `ordn`.
slashed-zero	Erzwingt eine Null mit Schrägstrich. Entspricht OpenType `zero`.
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Praxis

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

Sie wird verwendet, um die Schriftfarbe zu ändernSie ermöglicht ein besseres Mischen von Zeichen aus verschiedenen SchriftsystemenSie ermöglicht die Steuerung der Verwendung alternativer Glyphen für Zahlen, Brüche und OrdinalmarkerSie wird verwendet, um die Schriftgröße festzulegenSie fördert die Verwendung bestimmter Stile in einer Schriftart

CSS font-variant-numeric-Eigenschaft ​

Syntax ​

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

Ergebnis ​