Числовой вариант шрифта

​

Основы использования

​

Применение числовых вариантов

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

Эти утилиты можно компоновать, поэтому вы можете включить несколько функций font-variant-numeric, объединив несколько классов в Вашем HTML:

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

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

​

Порядковый номер

Используйте утилиту ordinal, чтобы включить специальные глифы для порядковых маркеров.

<p class="ordinal ...">1-й</p>

​

Разрезанный ноль

Используйте утилиту slashed-zero, чтобы установить 0 с косой чертой; это полезно, когда необходимо четкое различие между O и 0.

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

​

Цифры на подкладке

Используйте утилиту lining-nums, чтобы использовать числовые глифы, которые выровнены по своей базовой линии. Это соответствует функции OpenType lnum. Это значение по умолчанию для большинства шрифтов.

<p class="lining-nums ...">
  1234567890
</p>

​

Цифры в старинном стиле

Используйте утилиту oldstyle-nums для использования числовых глифов там, где у некоторых чисел есть нижние элементы. Это соответствует функции OpenType onum.

<p class="oldstyle-nums ...">
  1234567890
</p>

​

Пропорциональные цифры

Используйте утилиту proportional-nums, чтобы использовать числовые глифы с пропорциональной шириной (а не равномерные/табличные). Это соответствует функции OpenType pnum.

<p class="proportional-nums ...">
  12121
</p>
<p class="proportional-nums ...">
  90909
</p>

​

Табличные цифры

Используйте утилиту tabular-nums для использования числовых глифов, которые имеют одинаковую/табличную ширину (а не пропорциональную). Это соответствует функции OpenType tnum.

<p class="tabular-nums ...">
  12121
</p>
<p class="tabular-nums ...">
  90909
</p>

​

Диагональные дроби

Используйте утилиту diagonal-fractions, чтобы заменить числа, разделенные косой чертой, на обычные диагональные дроби. Это соответствует функции OpenType frac.

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

​

Дробные фракции

Используйте утилиту stacked-fractions, чтобы заменить числа, разделенные косой чертой, обычными составными дробями. Это соответствует функции OpenType afrc. Кажется, очень немногие шрифты поддерживают эту функцию — здесь мы использовали Ubuntu Mono.

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

​

Сброс вариантов числового шрифта

Используйте свойство normal-nums для сброса вариантов числового шрифта. Обычно это полезно для сброса функции шрифта в определенной контрольной точке:

<p class="slashed-zero tabular-nums md:normal-nums ...">
  12345
</p>

​

Применяя условно

​

Наведение, фокус и другие состояния

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:tabular-nums, чтобы применять утилиту tabular-nums только при hover.

<p class="proportional-nums hover:tabular-nums">
  <!-- ... -->
</p>

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

​

Контрольные точки и медиа-запросы

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md:tabular-nums, чтобы применить утилиту tabular-nums только на экранах среднего размера и выше.

<p class="proportional-nums md:tabular-nums">
  <!-- ... -->
</p>

Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.