CSS - font-variant-numeric
The font-variant-numeric
CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.
Example
CSS
Copy Code
p { font-variant-numeric: ordinal; }
Syntax
CSS
Copy Code
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 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 syntax
CSS
Copy Code
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 value | normal |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animatable | no |
Canonical order | order 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