字体变体数字

​基本用法

¥Basic usage

​应用数字变体

¥Applying numeric variants

使用 font-variant-numeric 工具为数字、分数和序号标记启用额外的字形（在支持它们的字体中）。

¥Use the font-variant-numeric utilities to enable additional glyphs for numbers, fractions, and ordinal markers (in fonts that support them).

这些工具是可组合的，因此你可以通过在 HTML 中组合多个类来启用多个 font-variant-numeric 功能：

¥These utilities are composable so you can enable multiple font-variant-numeric features by combining multiple classes in your HTML:

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

请注意，许多字体不支持这些功能（例如支持堆叠分数的情况尤其少见），因此其中一些工具可能无效，具体取决于你使用的字体系列。

¥Note that many fonts don’t support these features (stacked fractions support for example is especially rare), so some of these utilities may have no effect depending on the font family you are using.

​序数

¥Ordinal

使用 ordinal 工具为序号标记启用特殊字形。

¥Use the ordinal utility to enable special glyphs for the ordinal markers.

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

​削减零

¥Slashed Zero

使用 slashed-zero 工具强制使用斜线 0；当需要明确区分 O 和 0 时，这很有用。

¥Use the slashed-zero utility to force a 0 with a slash; this is useful when a clear distinction between O and 0 is needed.

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

​现代数字体

¥Lining figures

使用 lining-nums 工具来使用全部按其基线对齐的数字字形。这对应于 lnum OpenType 功能。这是大多数字体的默认设置。

¥Use the lining-nums utility to use the numeric glyphs that are all aligned by their baseline. This corresponds to the lnum OpenType feature. This is the default for most fonts.

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

​古风体数字

¥Oldstyle figures

使用 oldstyle-nums 工具来使用数字字形，其中某些数字具有下部。这对应于 onum OpenType 功能。

¥Use the oldstyle-nums utility to use numeric glyphs where some numbers have descenders. This corresponds to the onum OpenType feature.

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

​比例数字

¥Proportional figures

使用 proportional-nums 工具来使用具有比例宽度（而不是统一/表格）的数字字形。这对应于 pnum OpenType 功能。

¥Use the proportional-nums utility to use numeric glyphs that have proportional widths (rather than uniform/tabular). This corresponds to the pnum OpenType feature.

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

​表格数字

¥Tabular figures

使用 tabular-nums 工具来使用具有统一/表格宽度（而不是按比例）的数字字形。这对应于 tnum OpenType 功能。

¥Use the tabular-nums utility to use numeric glyphs that have uniform/tabular widths (rather than proportional). This corresponds to the tnum OpenType feature.

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

​对角分数

¥Diagonal fractions

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

¥Use the diagonal-fractions utility to replace numbers separated by a slash with common diagonal fractions. This corresponds to the frac OpenType feature.

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

​堆叠分数

¥Stacked fractions

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

¥Use the stacked-fractions utility to replace numbers separated by a slash with common stacked fractions. This corresponds to the afrc OpenType feature. Very few fonts seem to support this feature — we’ve used Ubuntu Mono here.

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

​重置数字字体变体

¥Resetting numeric font variants

使用 normal-nums 属性重置数字字体变体。这通常对于在特定断点处重置字体功能很有用：

¥Use the normal-nums property to reset numeric font variants. This is usually useful for resetting a font feature at a particular breakpoint:

<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>

有关所有可用状态修饰符的完整列表，请查看悬停、聚焦、以及其他状态 文档。

​断点和媒体查询

你还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗黑模式、首选减少运动等。例如，使用 md:tabular-nums 仅在中等屏幕尺寸及以上时应用 tabular-nums 工具。

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

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