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

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

Цифры могут иметь различные варианты, например порядковые (например, 1-й), дроби (например, 1/2). В отличие от букв, они не меняют смысл содержимого, но такие вариации добавляют дополнительный контекст и могут влиять на читаемость.

Основное ограничение заключается в том, что только ограниченное количество шрифтов полностью поддерживает font-variant-numeric и font-variant. Существует большое количество шрифтов, совместимых с OpenType, но не так много вариантов, использующих все возможности font-variant-numeric.

Начальное значение	normal
Применяется ко	Всем элементам. Также применяется к ::first-letter и ::first-line.
Наследуется	Да.
Анимация	Дискретная.
Версия	CSS3
Синтаксис DOM	object.style.fontVariantNumeric = "slashed-zero";

Синтаксис

Синтаксис свойства CSS font-variant-numeric

css

font-variant-numeric: normal | &lt;numeric-figure-values&gt; | &lt;numeric-spacing-values&gt; | &lt;numeric-fraction-values&gt; | ordinal | slashed-zero;

Пример свойства font-variant-numeric:

Пример использования свойства CSS font-variant-numeric со значениями oldstyle-nums и diagonal-fractions

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document </title>
    <style>
      .p1 {
        font-variant-numeric: oldstyle-nums;
      }
      .p2 {
        font-variant-numeric: diagonal-fractions;
      }
    </style>
  </head>
  <body>
    <h2>Font-variant-numeric property example</h2>
    <p class="p1">001528931</p>
    <p class="p2">1/2</p>
  </body>
</html>

Try it Yourself »

Результат

CSS font-variant-numeric Property

Значения

Значение	Описание
normal	Альтернативные глифы не включены.
`<numeric-figure-values>`	Управляет стилем цифр. Ключевые слова: `lining-nums`, `oldstyle-nums`.
`<numeric-spacing-values>`	Управляет шириной интервала. Ключевые слова: `proportional-nums`, `tabular-nums`.
`<numeric-fraction-values>`	Управляет стилем дробей. Ключевые слова: `diagonal-fractions`, `stacked-fractions`.
ordinal	Заменяет цифры на надстрочные порядковые глифы (например, ¹ˢᵗ, ²ⁿᵈ) вместо добавления текста вроде "st" или "nd". Соответствует OpenType `ordn`.
slashed-zero	Принудительно добавляет косую черту к нулю. Соответствует OpenType `zero`.
initial	Устанавливает свойству значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Практика

Что делает свойство CSS font-variant-numeric?

Оно используется для изменения цвета шрифтаОно позволяет символам из разных письменностей лучше смешиватьсяОно позволяет управлять использованием альтернативных глифов для цифр, дробей и порядковых индексовОно используется для установки размера шрифтаОно поощряет использование определённых стилей в шрифте

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

Синтаксис ​

Пример свойства font-variant-numeric: ​

Результат ​