字体变体数字

​基础用法

​应用数字变体

使用 font-variant-numeric 实用程序为数字、分数和序数标记启用附加字形（在支持它们的字体中）*。

这些实用程序是可组合的，因此您可以通过组合 HTML 中的多个类来启用多个 font-variant-numeric 功能：

<p class="ordinal slashed-zero tabular-nums ...">
  1234567890
</p>

请注意，许多字体不支持这些功能（例如，堆叠分数支持尤其罕见），因此其中一些实用程序可能对您正在使用的字体系列不起作用。

​序数

使用 ordinal 实用程序为序数标记启用特殊字形。

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

​斜线零

使用 slashed-zero 实用程序强制将 0 标记为斜线；当需要明确区分 O 和 0 时，这很有用。

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

​衬线图形

使用 lining-nums 实用程序来使用按基线对齐的数字字形。这对应于 lnum OpenType 功能。这是大多数字体的默认设置。

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

​旧式数字

使用 oldstyle-nums 实用程序来使用数字字形，其中某些数字有降部。这对应于 onum OpenType 功能。

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

​比例数字

使用 proportional-nums 实用程序可使用具有比例宽度（而非统一/表格）的数字字形。这对应于 pnum OpenType 功能。

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

​表格数据

使用 tabular-nums 实用程序可使用具有统一/表格宽度（而非比例）的数字字形。这对应于 tnum OpenType 功能。

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

​对角分数

使用 diagonal-fractions 实用程序将斜线分隔的数字替换为常见的对角分数。这对应于 frac OpenType 功能。

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

​堆叠分数

使用 stacked-fractions 实用程序将斜线分隔的数字替换为常见的堆叠分数。这对应于 afrc OpenType 功能。很少有字体似乎支持此功能 - 我们在这里使用了 Ubuntu Mono。

<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 来仅 在 hover应用 tabular-nums.

<p class="proportional-nums hover:tabular-nums">
  <!-- ... -->
</p>

详细了解, 请参考 Hover, Focus, & Other States 文档.

​断点和媒体查询

您还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗模式、首选减少运动等。例如, 使用 md:tabular-nums 来应用 tabular-nums 程序，适用于中等屏幕尺寸及以上。

<p class="proportional-nums md:tabular-nums">
  <!-- ... -->
</p>

进一步了解，请参考 响应式设计, 暗黑模式 和 媒体查询.