Типография
Утилиты для управления вариантом из чисел.
Используйте утилиты 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.