CSS font-variant-numeric Property

The font-variant-numericproperty takes control of 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.
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

<!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>

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.




Related articles