排版
用于控制数字变体的工具类。
| 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="...">小计</dt> <dd class="text-right slashed-zero tabular-nums ...">$100.00</dd> <dt class="...">税费</dt> <dd class="text-right slashed-zero tabular-nums ...">$14.50</dd> <dt class="...">总计</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>Prefix a font-variant-numeric utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<p class="proportional-nums md:tabular-nums ..."> Lorem ipsum dolor sit amet...</p>Learn more about using variants in the variants documentation.