Font Variant Numeric 字体变体数字
控制数字变体的实用工具。
| Class | Properties |
|---|
基本用法
应用数字变体
使用 font-variant-numeric 实用程序，为数字、分数和序数标记启用额外的字形*（在支持它们的字体中）*。
这些实用程序是可组合的，因此您可以通过在 HTML 中组合多个类来启用多个 font-variant-numeric 功能。
<p class="ordinal slashed-zero tabular-nums ...">
1234567890
</p>请注意，许多字体不支持这些功能（例如，支持堆叠分数的功能特别罕见），因此，取决于您使用的字体系列，其中一些实用程序可能没有效果。
序数
使用 ordinal 实用程序启用序数标记的特殊字形。
1st
<p class="ordinal ...">1st</p>斜杠零
使用 slashed-zero 实用程序来强制使用斜杠的 0；当需要清晰区分 O 和 0 时，这是很有用的。
0
<p class="slashed-zero ...">0</p>等宽数字
使用 lining-nums 实用程序来使用所有按基线对齐的数字字形。这对应于 lnum OpenType 功能。这是大多数字体的默认设置。
1234567890
<p class="lining-nums ...">
1234567890
</p>旧式数字
使用 oldstyle-nums 实用程序，在一些数字具有下行符时使用数字字形。这对应于 onum OpenType 功能。
1234567890
<p class="oldstyle-nums ...">
1234567890
</p>比例数字
使用 proportional-nums 实用程序来使用具有比例宽度（而不是均匀/表格）的数字字形。这对应于 pnum OpenType 功能。
12121
90909
<p class="proportional-nums ...">
12121
</p>
<p class="proportional-nums ...">
90909
</p>表格数字
使用 tabular-nums 实用程序来使用具有均匀/表格宽度（而不是比例）的数字字形。这对应于 tnum OpenType 功能。
12121
90909
<p class="tabular-nums ...">
12121
</p>
<p class="tabular-nums ...">
90909
</p>对角线分数
使用 diagonal-fractions 实用程序将用斜杠分隔的数字替换为常见的斜线分数。这对应于 frac 的 OpenType 功能。
1/2 3/4 5/6
<p class="diagonal-fractions ...">
1/2 3/4 5/6
</p>堆叠分数
使用 stacked-fractions 实用程序将用斜杠分隔的数字替换为常见的堆叠分数。这对应于 afrc OpenType 功能。似乎很少有字体支持这个功能 — 我们在这里使用了 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 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 hover:tabular-nums 仅在悬停时应用 tabular-nums 实用程序。
<p class="proportional-nums hover:tabular-nums">
<!-- ... -->
</p>有关所有可用状态修改器的完整列表，请查看悬停、焦点和其他状态文档。
断点和媒体查询
您还可以使用变体修饰符来针对响应式断点、深色模式、prefers-reduced-motion 等媒体查询进行定位。例如，使用 md:tabular-nums 仅在中等屏幕尺寸及以上应用 tabular-nums 实用程序。
<p class="proportional-nums md:tabular-nums">
<!-- ... -->
</p>