Начертание цифр (font-variant-numeric)link

Модификаторы начертания цифр позволяют изменить отображение чисел и некоторых их особенностей (например, дробей).

Таблица классовlink

Класс	Значение
.num-normal	font-variant-numeric: normal;
.num-ordinal	font-variant-numeric: ordinal;
.num-slashed-zero	font-variant-numeric: slashed-zero;
.num-lining	font-variant-numeric: lining-nums;
.num-oldstyle	font-variant-numeric: oldstyle-nums;
.num-proportional	font-variant-numeric: proportional-nums;
.num-tabular	font-variant-numeric: tabular-nums;
.num-diagonal-fractions	font-variant-numeric: diagonal-fractions;
.num-stacked-fractions	font-variant-numeric: stacked-fractions;

Модификаторы начертания цифр можно комбинировать для одновременной активации нескольких стилей чисел:

<p class="num-ordinal num-slashed-zero num-tabular">1234567890</p>

Активирует специальные глифы для порядковых числительных (1st, 2nd и т.п.) в шрифтах, поддерживающих данную особенность:

<p class="num-ordinal">1st</p>

Помогает чётко отличать цифру 0 от буквы O:

<p class="num-slashed-zero">0</p>

Равно высокие цифры, стоящие на опорной линии текста:

<p class="num-lining">1234567890</p>

Минускульные цифры с нижними выносными элементами:

<p class="num-oldstyle">1234567890</p>

Цифры разной ширины:

<p class="num-proportional">1111</p>
<p class="num-proportional">0000</p>

Цифры одинаковой ширины, упрощающие выравнивание в таблицах:

<p class="num-tabular">1111</p>
<p class="num-tabular">0000</p>

Числитель и знаменатель уменьшены и разделены косой чертой:

<p class="num-diagonal-fractions">1/2 3/4 5/6</p>

Числитель и знаменатель уменьшены, расположены друг над другом и разделены горизонтальной линией:

<p class="num-stacked-fractions">1/2 3/4 5/6</p>