- 排版
- 字体变体数字
排版
字体变体数字
用于控制数字变体的工具。
基本用法(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.
1st
<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.
0
<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.
1234567890
<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.
1234567890
<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.
12121
90909
<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.
12121
90909
<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.
1/2 3/4 5/6
<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.
1/2 3/4 5/6
<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>