Краткая справка

Класс
Свойства
normal-numsfont-variant-numeric: normal;
ordinalfont-variant-numeric: ordinal;
slashed-zerofont-variant-numeric: slashed-zero;
lining-numsfont-variant-numeric: lining-nums;
oldstyle-numsfont-variant-numeric: oldstyle-nums;
proportional-numsfont-variant-numeric: proportional-nums;
tabular-numsfont-variant-numeric: tabular-nums;
diagonal-fractionsfont-variant-numeric: diagonal-fractions;
stacked-fractionsfont-variant-numeric: stacked-fractions;

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

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

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

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

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

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

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

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

1-й

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

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

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

0

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

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

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

1234567890

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

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

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

1234567890

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

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

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

12121

90909

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

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

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

12121

90909

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

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

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

1/2 3/4 5/6

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

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

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

1/2 3/4 5/6

<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>

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