排版
用于控制数字变体的实用工具。
类 | 样式 |
---|---|
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:
这样的断点变体,以便仅在中等 屏幕尺寸及以上应用该实用程序
<p class="proportional-nums md:tabular-nums ..."> <!-- ... --></p>
了解有关在变体文档中使用变体的更多信息。