Типография
Утилиты для управления вариантами цифр.
Class | Styles |
---|---|
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
являются композируемыми, поэтому вы можете включить несколько вариантов, комбинируя их:
<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>
Подробнее об использовании вариантов читайте в документации по вариантам.