CSS font-variant-numeric Property

Last Updated : 08 Jun, 2023

The font-variant-numeric property of CSS is used to control the usage of alternate glyphs. This is done in terms of units or markers such as numbers or fractions. in other words, the font-variant-numeric property controls the display of numeric characters in a font. It allows you to specify the stylistic variations for numeric digits, such as lining or old-style figures, fractions, and ordinal indicators. This property provides fine-grained control over how numbers are rendered within text content.

Syntax:

font-variant-numeric: value

Property values:

normal: Using normal will remove each effect of the font-variant-numeric property.
ordinal: This value directly indicates the open type values i.e on. The term makes use of special glyphs for ordinal markers.
slashed-zero: Slashed-zero used a zero with a slash. These property values prove to be very useful while distinguishing between 0 and O.
lining-nums: Lining nums property corresponds to the open type values i.e lnum. This keyword activates the numbers lying on the baseline.
oldstyle-nums: Oldstyle-nums property corresponds to the open type values i.e onum. This keyword activates the set of Figures where some numbers have descendant.
proportional-nums: This property activates those norms where not every number is of the same size. Its Open type value is plum.
tabular-nums: Tabular-nums open type value is tnum. It activates those set of figures where set of numbers is of the same size.
diagonal-fractions: It open type value is frac. This activates those set of figures where the numerator and denominator are made smaller and are separated by slash.
stacked-fractions: It open type value is arac. This activates those sets of figures where the numerator and denominator are made smaller, stacked, and are separated by a horizontal line.

Example: In this example, we are using the CSS font-variant numeric property.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href=
"https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,400;1,400&display=swap"
          rel="stylesheet" />
    <title>CSS font-variant-numeric Property</title>
</head>
<style>
    * {
        font-family: "Source Sans Pro";
    }

    .value1 {
        font-variant-numeric: normal;
    }

    .value2 {
        font-variant-numeric: ordinal;
    }

    .value3 {
        font-variant-numeric: slashed-zero;
    }

    .value4 {
        font-variant-numeric: lining-nums;
    }

    .value5 {
        font-variant-numeric: oldstyle-nums;
    }

    .value6 {
        font-variant-numeric: tabular-nums;
    }

    .value7 {
        font-variant-numeric: diagonal-fractions;
    }

    .value7 {
        font-variant-numeric: stacked-fractions;
    }
</style>
<body>

    <p>
        <span>Ordinal: </span>
        <span class="value1">1st, 2nd, 3rd, 6th</span>
    </p>


    <p>
        <span>Normal: </span>
        <span class="value2">1st, 2nd, 3rd, 6th</span>
    </p>


    <p>
        <span>Slashes-zero: </span>
        <span class="value3">1st, 2nd, 3rd, 6th</span>
    </p>

    <p class="value4">
        <span>lining-nums: </span>
        1st, 2nd, 3rd, 6th
    </p>

    <p class="value5">
        <span>Oldstyle-nums: </span>
        1st, 2nd, 3rd, 6th
    </p>

    <p class="value6">
        <span>Tabular-nums: </span>
        1st, 2nd, 3rd, 6th
    </p>

    <p class="value7">
        <span>diagonal-fraction: </span>
        1st, 2nd, 3rd, 6th
    </p>

    <p class="value7">
        <span>stacked-fraction: </span>
        1st, 2nd, 3rd, 6th
    </p>

</body>
</html>