font-variant-numeric

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Die font-variant-numeric CSS Eigenschaft steuert die Verwendung von alternativen Glyphen für Zahlen, Brüche und Ordnungsmarker.

Probieren Sie es aus

Syntax

css
font-variant-numeric: normal;
font-variant-numeric: ordinal;
font-variant-numeric: slashed-zero;
font-variant-numeric: lining-nums; /* <numeric-figure-values> */
font-variant-numeric: oldstyle-nums; /* <numeric-figure-values> */
font-variant-numeric: proportional-nums; /* <numeric-spacing-values> */
font-variant-numeric: tabular-nums; /* <numeric-spacing-values> */
font-variant-numeric: diagonal-fractions; /* <numeric-fraction-values> */
font-variant-numeric: stacked-fractions; /* <numeric-fraction-values> */
font-variant-numeric: oldstyle-nums stacked-fractions;

/* Global values */
font-variant-numeric: inherit;
font-variant-numeric: initial;
font-variant-numeric: revert;
font-variant-numeric: revert-layer;
font-variant-numeric: unset;

Diese Eigenschaft kann eine von zwei Formen annehmen:

  • entweder den Schlüsselwortwert normal
  • oder einen oder mehrere der unten aufgeführten Werte, durch Leerzeichen getrennt, in beliebiger Reihenfolge.

Werte

normal

Dieses Schlüsselwort führt zur Deaktivierung der Verwendung solcher alternativen Glyphen.

ordinal

Dieses Schlüsselwort erzwingt die Verwendung spezieller Glyphen für die Ordnungsmarker, wie 1st, 2nd, 3rd, 4th in Englisch oder 1a in Italienisch. Es entspricht den OpenType-Werten ordn.

slashed-zero

Dieses Schlüsselwort erzwingt die Verwendung einer 0 mit einem Schrägstrich; dies ist nützlich, wenn eine klare Unterscheidung zwischen O und 0 erforderlich ist. Es entspricht den OpenType-Werten zero.

<numeric-figure-values>

Diese Werte steuern die verwendeten Ziffern für Zahlen. Zwei Werte sind möglich:

  • lining-nums, aktiviert das Set von Ziffern, bei denen alle Zahlen auf der Grundlinie liegen. Es entspricht den OpenType-Werten lnum.
  • oldstyle-nums, aktiviert das Set von Ziffern, bei denen einige Zahlen wie 3, 4, 7, 9 Abstriche haben. Es entspricht den OpenType-Werten onum.
<numeric-spacing-values>

Diese Werte steuern die Größen der verwendeten Ziffern für Zahlen. Zwei Werte sind möglich:

  • proportional-nums, aktiviert das Set von Ziffern, bei denen nicht alle Zahlen die gleiche Größe haben. Es entspricht den OpenType-Werten pnum.
  • tabular-nums, aktiviert das Set von Ziffern, bei denen alle Zahlen die gleiche Größe haben, wodurch sie leicht wie in Tabellen ausgerichtet werden können. Es entspricht den OpenType-Werten tnum.
<numeric-fraction-values>

Diese Werte steuern die Glyphen, die zur Darstellung von Brüchen verwendet werden. Zwei Werte sind möglich:

  • diagonal-fractions, aktiviert das Set von Ziffern, bei denen Zähler und Nenner verkleinert und durch einen Schrägstrich getrennt werden. Es entspricht den OpenType-Werten frac.
  • stacked-fractions, aktiviert das Set von Ziffern, bei denen Zähler und Nenner verkleinert, gestapelt und durch eine horizontale Linie getrennt werden. Es entspricht den OpenType-Werten afrc.

Formale Definition

Initialer Wertnormal
Anwendbar aufall elements and text. Auch anwendbar auf ::first-letter und ::first-line.
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

font-variant-numeric = 
  normal                                              |
  [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]  

<numeric-figure-values> = 
  lining-nums    |
  oldstyle-nums  

<numeric-spacing-values> = 
  proportional-nums  |
  tabular-nums       

<numeric-fraction-values> = 
  diagonal-fractions  |
  stacked-fractions

Beispiele

Einstellen ordinaler numerischer Formen

Spezifikationen

Specification
CSS Fonts Module Level 4
# font-variant-numeric-prop

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch