CSS свойство font-variant-numeric

Свойство font-variant-numeric контролирует использование альтернативных глифов для цифр, дробей и порядковых числительных.

Значение по умолчанию normal
Применяется Ко всем элементам, а также к ::first-letter и ::first-line.
Наследуется Да
Анимируемое Discrete.
Версия CSS3
DOM синтаксис object.style.fontVariantNumeric = "slashed-zero";

Синтаксис

font-variant-numeric: normal | <numeric-figure-values> | <numeric-spacing-values> | <numeric-fraction-values> | ordinal | slashed-zero;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .p1 {
      font-variant-numeric: oldstyle-nums;
      }
      .p2 {
      font-variant-numeric: diagonal-fractions;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства font-variant-numeric</h2>
    <p class="p1">001528931</p>
    <p class="p2">952321313500</p>
  </body>
</html>

Значения

Значение Описание
normal Деактивирует использование альтернативных глифов.
<numeric-figure-values> Контролирует формы, которые используются для цифр.
<numeric-spacing-values> Контролирует размер форм, который используется для цифр.
<numeric-fraction-values> Контролирует глифы, используемые для дробей.
ordinal Использует специальные глифы для порядковых числительных (например, 1st, 2nd, 3rd). Это соответствует значению OpenType ordn.
slashed-zero 0 используется со знаком косой черты. Полезно, когда буква O и цифра 0 не различаются. Это соответствует значению OpenType zero.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome edge firefox safari opera
52.0+ 34.0+ 9.1+ 39.0+

Практикуйте свои знания

Что из перечисленного является значениями для свойства font-variant-numeric в CSS?
Считаете ли это полезным?