CSS font-variant-numeric Property
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 limitation is that only a limited number of fonts fully support 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
Syntax of CSS font-variant-numeric Property
font-variant-numeric: normal | <numeric-figure-values> | <numeric-spacing-values> | <numeric-fraction-values> | ordinal | slashed-zero;Example of the font-variant-numeric property:
Example of CSS font-variant-numeric Property with oldstyle-nums and diagonal-fractions values
<!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">1/2</p>
</body>
</html>Result
Values
| Value | Description |
|---|---|
| normal | Alternate glyphs are not enabled. |
<numeric-figure-values> | Controls the figure style. Keywords: lining-nums, oldstyle-nums. |
<numeric-spacing-values> | Controls the spacing width. Keywords: proportional-nums, tabular-nums. |
<numeric-fraction-values> | Controls the fraction style. Keywords: diagonal-fractions, stacked-fractions. |
| ordinal | Replaces digits with superscript ordinal glyphs (e.g., ¹ˢᵗ, ²ⁿᵈ) instead of adding text like "st" or "nd". Maps to OpenType ordn. |
| slashed-zero | Forces a zero with a slash. Maps to OpenType zero. |
| initial | Sets the property to its default value. |
| inherit | Inherits the property from its parent element. |
Practice
What does the CSS font-variant-numeric property do?