Font Variant Numeric

Utilities to change an element's font variant numeric.

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

Normal (Default)

Use d-fvn-normal to deactivate any alternate glyphs.

<p class="d-fvn-normal">...</p>

The class d-fvn-ordinal forces the use of special glyphs for ordinal markers, like 1st, 2nd, 3rd.

<p class="d-fvn-ordinal">1st, 2nd, 3rd, 4th</p>

Use d-fvn-proportional to set different sizes for each number.

<div class="d-fvn-proportional">...</div>

Use d-fvn-tabular for aligning tabular data and preventing layout shifts of dynamically-changing content. For example, a timer counting down.

<div class="d-fvn-tabular"><table>...</table></div>

Use d-fvn-diagonal to display numerator and denominator smaller and separated by a slash.

<p class="d-fvn-diagonal">1/2 3/4 5/6</p>

Use d-fvn-unset to deactivate other value previously set to font-variant-numeric.

<p class="d-fvn-unset">...</p>

Class	Output
.d-fvn-normal	font-variant-numeric: normal !important;
.d-fvn-ordinal	font-variant-numeric: ordinal !important;
.d-fvn-proportional	font-variant-numeric: proportional-nums !important;
.d-fvn-tabular	font-variant-numeric: tabular-nums !important;
.d-fvn-diagonal	font-variant-numeric: diagonal-fractions !important;
.d-fvn-unset	font-variant-numeric: unset !important;