The font-variant-numeric CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.
Use d-fvn-normal to deactivate any alternate glyphs.
<p class="d-fvn-normal">1234567890</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">
<table class="numbers-table">
<tbody>
<tr>
<td><span>21.0</span></td>
<td><span>160</span></td>
<td><span>3.90</span></td>
<td><span>2.875</span></td>
<td><span>17.02</span></td>
</tr>
<tr>
<td><span>22.8</span></td>
<td><span>108</span></td>
<td><span>3.85</span></td>
<td><span>2.320</span></td>
<td><span>18.61</span></td>
</tr>
<tr>
<td><span>21.4</span></td>
<td><span>258</span></td>
<td><span>3.08</span></td>
<td><span>3.215</span></td>
<td><span>19.44</span></td>
</tr>
</tbody></table>
</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 class="numbers-table">
<tbody>
<tr>
<td><span>21.0</span></td>
<td><span>160</span></td>
<td><span>3.90</span></td>
<td><span>2.875</span></td>
<td><span>17.02</span></td>
</tr>
<tr>
<td><span>22.8</span></td>
<td><span>108</span></td>
<td><span>3.85</span></td>
<td><span>2.320</span></td>
<td><span>18.61</span></td>
</tr>
<tr>
<td><span>21.4</span></td>
<td><span>258</span></td>
<td><span>3.08</span></td>
<td><span>3.215</span></td>
<td><span>19.44</span></td>
</tr>
</tbody></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">1234567890</p>