CSS - font-variant-numeric Property

The font-variant-numeric CSS property is used to control the usage of alternate glyphs for numbers, fractions and ordinal markers.

Possible Values

  • normal: Deactivates usage of alternate glyphs.

  • one or more of the following values, space-separated and in any order.

    • ordinal

    • slashed-zero

    • <numeric-figure-values>: Controls the figures used for numbers.

      • lining-nums: Activates the setting of figures to numbers that are lying on baseline. Corresponds to OpenType value lnum.

      • oldstyle-nums: Activates the setting of figures to numbers that have descenders (3,4,7,9). Corresponds to OpenType value onum.

    • <numeric-spacing-values>: Controls the sizing of figures used for numbers.

      • proportional-nums: Activates the setting of numbers are not of same size. Corresponds to OpenType value pnum.

      • tabular-nums: Activates the setting of numbers are of same size. Corresponds to OpenType value tnum.

    • <numeric-fraction-values>: Controls the glyphs used for fractions.

      • diagonal-fractions: Activates the setting of figures where numerator and denominator are made smaller, separated by a slash. Corresponds to OpenType value frac.

      • stacked-fractions: Activates the setting of figures where numerator and denominator are made smaller, stacked and separated by a horizontal line. Corresponds to OpenType value afrc.

Applies to

All the HTML elements.

DOM Syntax

object.style.fontVariantNumeric = "normal | ordinal";

CSS font-variant-numeric - Basic Example

Here is an example:

<html>
<head>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source Sans Pro">
<style>
   * {
      font-family: "Source Sans Pro";
   }
   div {
      border: 1px solid red;
      margin: 5px;
      width: 200px;
   }
   p.value1 {
      font-variant-numeric: normal;
   }
   p.value2 {
      font-variant-numeric: ordinal;
   }
   p.value3 {
      font-variant-numeric: slashed-zero;
   }
   p.value4 {
      font-variant-numeric: lining-nums;
   }
   p.value5 {
      font-variant-numeric: oldstyle-nums;
   }
   p.value6 {
      font-variant-numeric: tabular-nums;
   }   
</style>
</head>
<body>
   <div>
      <h3>Normal: </h3>
      <p class="value1">1st, 2nd, 3rd, 6th</p>
   </div>
   <div>
      <h3>Ordinal: </h3>
      <p class="value2">1st, 2nd, 3rd, 6th</p>
   </div>
   <div>
      <h3>Slashes-zero: </h3>
      <p class="value3">1st, 2nd, 3rd, 6th</p>
   </div>
   <div>
      <h3>lining-nums: </h3>
      <p class="value4">1st, 2nd, 3rd, 6th</p>
   </div>
   <div>
      <h3>Oldstyle-nums: </h3>
      <p class="value5">1st, 2nd, 3rd, 6th</p>
   </div>
   <div>
      <h3>Tabular-nums: </h3>
      <p class="value6">1st, 2nd, 3rd, 6th</p>
   </div>
</body>
</html>
Advertisements