The font-variant-numeric property supports the OpenType font format taking control of the usage of alternate glyphs for numbers, fractions, and ordinal markers.
Numbers can have variants such as ordinals (e.g. 1st), fractions (e.g. 1/2). Unlike letters, they don’t change the content’s meaning but these variations add additional context and can have an effect on legibility.
The main concern is that there is a limited number of fonts that can maximize the use of font-variant-numeric and font-variant. There is a large number of OpenType-compatible fonts, but there aren’t many options that use all the features of font-variant-numeric.
| Initial Value | normal |
| Applies to | All elements. It also applies to ::first-letter and ::first-line. |
| Inherited | Yes. |
| Animatable | Discrete. |
| Version | CSS3 |
| DOM Syntax | object.style.fontVariantNumeric = “slashed-zero”; |
Syntax
font-variant-numeric: normal | <numeric-figure-values> | <numeric-spacing-values> | <numeric-fraction-values> | ordinal | slashed-zero;Example of the font-variant-numeric property:
<!DOCTYPE html>
<html>
<head>
<title>The title of the document </title>
<style>
.p1 {
font-variant-numeric: oldstyle-nums;
}
.p2 {
font-variant-numeric: diagonal-fractions;
}
</style>
</head>
<body>
<h2>Font-variant-numeric property example</h2>
<p class="p1">001528931</p>
<p class="p2">952321313500</p>
</body>
</html>Result
Values
| Value | Description |
|---|---|
| normal | The use of alternate glyphs are not enabled. |
| <numeric-figure-values> | Controls the figures which are used for numbers. |
| <numeric-spacing-values> | Controls the sizing of figures which is used for numbers. |
| <numeric-fraction-values> | Controls the glyphs which are used for fractions. |
| ordinal | Forces the use of special glyphs for the ordinal markers, like 1st, 2nd, 3rd. It corresponds to the OpenType values ordn. |
| slashed-zero | Forces the use of a 0 with a slash. This is needed when O and 0 are not differentiated. It corresponds to the OpenType values zero. |
| initial | It makes the property use its default value. |
| inherit | It inherits the property from its parents element. |