font-variant-numeric
The font-variant-numeric
CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.
Try it
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;
This property can take one of two forms:
- either the keyword value
normal
- or one or more of the other values listed below, space-separated, in any order.
Values
normal
-
This keyword leads to the deactivation of the use of such alternate glyphs.
ordinal
-
This keyword forces the use of special glyphs for the ordinal markers, like 1st, 2nd, 3rd, 4th in English or a 1a in Italian. It corresponds to the OpenType values
ordn
. slashed-zero
-
This keyword forces the use of a 0 with a slash; this is useful when a clear distinction between O and 0 is needed. It corresponds to the OpenType values
zero
. - <numeric-figure-values>
-
These values control the figures used for numbers. Two values are possible:
lining-nums
activating the set of figures where numbers are all lying on the baseline. It corresponds to the OpenType valueslnum
.oldstyle-nums
activating the set of figures where some numbers, like 3, 4, 7, 9 have descenders. It corresponds to the OpenType valuesonum
.
- <numeric-spacing-values>
-
These values controls the sizing of figures used for numbers. Two values are possible:
proportional-nums
activating the set of figures where numbers are not all of the same size. It corresponds to the OpenType valuespnum
.tabular-nums
activating the set of figures where numbers are all of the same size, allowing them to be easily aligned like in tables. It corresponds to the OpenType valuestnum
.
- <numeric-fraction-values>
-
These values controls the glyphs used to display fractions. Two values are possible:
diagonal-fractions
activating the set of figures where the numerator and denominator are made smaller and separated by a slash. It corresponds to the OpenType valuesfrac
.stacked-fractions
activating the set of figures where the numerator and denominator are made smaller, stacked and separated by a horizontal line. It corresponds to the OpenType valuesafrc
.
Formal definition
Initial value | normal |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
Inherited | yes |
Computed value | as specified |
Animation type | discrete |
Formal 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
Examples
Setting ordinal numeric forms
Specifications
Specification |
---|
CSS Fonts Module Level 4 # font-variant-numeric-prop |
Browser compatibility
BCD tables only load in the browser