CSS - font-variant-numeric

The font-variant-numeric CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.

Example

 

CSS
p {
  font-variant-numeric: ordinal;
}

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: unset;

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 controls 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 values lnum.
  • oldstyle-nums activating the set of figures where some numbers, like 3, 4, 7, 9 have descenders. It corresponds to the OpenType values onum.
<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 values pnum.
  • 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 values tnum.
<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 values frac.
  • 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 values afrc.

Formal syntax

CSS
normal <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/font-variant-numeric#numeric-figure-values"><numeric-figure-values></a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/font-variant-numeric#numeric-spacing-values"><numeric-spacing-values></a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/font-variant-numeric#numeric-fraction-values"><numeric-fraction-values></a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> ordinal <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> slashed-zero <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><p>where <br><code><numeric-figure-values> = <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> lining-nums <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> oldstyle-nums <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><br><numeric-spacing-values> = <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> proportional-nums <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> tabular-nums <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><br><numeric-fraction-values> = <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> diagonal-fractions <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> stacked-fractions <a href="css/value_definition_syntax#brackets" title="Brackets">]</a></code></p>

Description  

The font-variant-numeric CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.

Initial valuenormal
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedyes
Mediavisual
Computed valueas specified
Animatableno
Canonical orderorder of appearance in the formal grammar of the values

Specifications  

Specification Status Comment
CSS Fonts Module Level 3
The definition of 'font-variant-numeric' in that specification.
Candidate Recommendation Initial definition

 

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 52.0 34 (34) [1] ? 39 ?
Feature Android Android Webview Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support No support 52.0 34.0 (34)[1] ? 39 ? 52.0

[1] Experimental implementation was available since Gecko 24. It was governed by the preference layout.css.font-features.enabled defaulting to true on Nightly and Aurora only.

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/font-variant-numeric

CSS CSS Fonts CSS Property NeedsLiveSample Reference