1. Типография
  2. font-variant-numeric

Типография

font-variant-numeric

Утилиты для управления вариантами цифр.

ClassStyles
normal-nums
font-variant-numeric: normal;
ordinal
font-variant-numeric: ordinal;
slashed-zero
font-variant-numeric: slashed-zero;
lining-nums
font-variant-numeric: lining-nums;
oldstyle-nums
font-variant-numeric: oldstyle-nums;
proportional-nums
font-variant-numeric: proportional-nums;
tabular-nums
font-variant-numeric: tabular-nums;
diagonal-fractions
font-variant-numeric: diagonal-fractions;
stacked-fractions
font-variant-numeric: stacked-fractions;

Примеры

Использование порядковых глифов

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

1st

<p class="ordinal ...">1st</p>

Использование перечеркнутых нулей

Используйте утилиту slashed-zero для принудительного отображения нуля с чертой в шрифтах, которые это поддерживают:

0

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

Использование выровненных цифр

Используйте утилиту lining-nums для использования цифровых глифов, выровненных по базовой линии в шрифтах, которые это поддерживают:

1234567890

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

Использование старинных цифр

Используйте утилиту oldstyle-nums для использования цифровых глифов, где некоторые цифры имеют выносные элементы в шрифтах, которые это поддерживают:

1234567890

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

Использование пропорциональных цифр

Используйте утилиту proportional-nums для использования цифровых глифов с пропорциональной шириной в шрифтах, которые это поддерживают:

12121

90909

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

Использование табличных цифр

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

12121

90909

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

Использование диагональных дробей

Используйте утилиту diagonal-fractions для замены чисел, разделенных чертой, на обычные диагональные дроби в шрифтах, которые это поддерживают:

1/2 3/4 5/6

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

Использование вертикальных дробей

Используйте утилиту stacked-fractions для замены чисел, разделенных чертой, на обычные вертикальные дроби в шрифтах, которые это поддерживают:

1/2 3/4 5/6

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

Комбинирование нескольких утилит

Утилиты font-variant-numeric являются композируемыми, поэтому вы можете включить несколько вариантов, комбинируя их:

Subtotal
$100.00
Tax
$14.50
Total
$114.50
<dl class="...">  <dt class="...">Subtotal</dt>  <dd class="text-right slashed-zero tabular-nums ...">$100.00</dd>  <dt class="...">Tax</dt>  <dd class="text-right slashed-zero tabular-nums ...">$14.50</dd>  <dt class="...">Total</dt>  <dd class="text-right slashed-zero tabular-nums ...">$114.50</dd></dl>

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

Используйте свойство normal-nums для сброса числовых вариантов шрифта:

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

Адаптивный дизайн

Префикс a font-variant-numeric утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<p class="proportional-nums md:tabular-nums ...">  Lorem ipsum dolor sit amet...</p>

Подробнее об использовании вариантов читайте в документации по вариантам.

Авторские права © 2025 Tailwind Labs Inc.·Политика в отношении товарных знаков