Домашняя страница Tailwind CSS
  1. Типография
  2. Числовой вариант шрифта

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

Класс
Свойства
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 lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:tabular-nums to only apply the tabular-nums utility on hover.

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

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

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

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:tabular-nums to apply the tabular-nums utility at only medium screen sizes and above.

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

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.