数字变体字体

​基本用法

​应用数字变体

使用 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 仅在悬停时应用 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>

要了解更多信息，请查看有关响应式设计、暗黑模式和其他媒体查询修饰符的文档。