The font-variant-numeric
CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.
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;
This property can take one of two forms:
normal
normal
ordinal
ordn
.slashed-zero
zero
.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
.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
.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
.normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]where
<numeric-figure-values> = [ lining-nums | oldstyle-nums ]
<numeric-spacing-values> = [ proportional-nums | tabular-nums ]
<numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ]
<p class="ordinal">1st, 2nd, 3rd, 4th, 5th</p>
/* This example uses the Source Sans Pro OpenType font, developed by Adobe and used here under the terms of the SIL Open Font License, Version 1.1: http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web */ @font-face { font-family: "Source Sans Pro"; font-style: normal; font-weight: 400; src: url("https://mdn.mozillademos.org/files/15757/SourceSansPro-Regular.otf") format("opentype"); } .ordinal { font-variant-numeric: ordinal; font-family: "Source Sans Pro"; }
Specification | Status | Comment |
---|---|---|
CSS Fonts Module Level 3 The definition of 'font-variant-numeric' in that specification. | Candidate Recommendation | Initial definition |
Initial value | normal |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | order of appearance in the formal grammar of the values |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 52 | No | 34
|
No | 39 | 9.1 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 52 | 52 | No | 34
|
39 | Yes | 6.0 |
© 2005–2018 Mozilla Developer Network and individual 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