font-variant-numeric

示例(Examples)

¥Examples

使用序数字形(Using ordinal glyphs)

¥Using ordinal glyphs

使用 ordinal 工具在支持它们的字体中为序数标记启用特殊字形：

¥Use the ordinal utility to enable special glyphs for the ordinal markers in fonts that support them:

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

使用斜线零(Using slashed zeroes)

¥Using slashed zeroes

使用 slashed-zero 工具在支持它们的字体中强制使用带斜线的零：

¥Use the slashed-zero utility to force a zero with a slash in fonts that support them:

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

使用内衬数字(Using lining figures)

¥Using lining figures

使用 lining-nums 工具在支持它们的字体中使用按基线对齐的数字字形：

¥Use the lining-nums utility to use numeric glyphs that are aligned by their baseline in fonts that support them:

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

使用旧式数字(Using oldstyle figures)

¥Using oldstyle figures

使用 oldstyle-nums 工具在支持它们的字体中使用某些数字具有下降符的数字字形：

¥Use the oldstyle-nums utility to use numeric glyphs where some numbers have descenders in fonts that support them:

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

使用比例数字(Using proportional figures)

¥Using proportional figures

使用 proportional-nums 工具在支持它们的字体中使用具有比例宽度的数字字形：

¥Use the proportional-nums utility to use numeric glyphs that have proportional widths in fonts that support them:

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

使用表格图(Using tabular figures)

¥Using tabular figures

使用 tabular-nums 工具在支持它们的字体中使用具有统一/表格宽度的数字字形：

¥Use the tabular-nums utility to use numeric glyphs that have uniform/tabular widths in fonts that support them:

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

使用对角线分数(Using diagonal fractions)

¥Using diagonal fractions

使用 diagonal-fractions 工具将支持斜线分隔的数字替换为常用对角线分数：

¥Use the diagonal-fractions utility to replace numbers separated by a slash with common diagonal fractions in fonts that support them:

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

使用堆叠分数(Using stacked fractions)

¥Using stacked fractions

使用 stacked-fractions 工具将斜线分隔的数字替换为常用对角线分数在支持它们的字体中堆叠分数：

¥Use the stacked-fractions utility to replace numbers separated by a slash with common stacked fractions in fonts that support them:

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

堆叠多个工具(Stacking multiple utilities)

¥Stacking multiple utilities

font-variant-numeric 工具是可组合的，因此你可以通过组合它们来启用多个变体：

¥The font-variant-numeric utilities are composable so you can enable multiple variants by combining them:

<dl class="...">
<dt class="...">Subtotal</dt>
<dd class="text-right slashed-zero tabular-nums ...">$100.00</dd>
<dt class="...">Tax</dt>
<dd class="text-right slashed-zero tabular-nums ...">$14.50</dd>
<dt class="...">Total</dt>
<dd class="text-right slashed-zero tabular-nums ...">$114.50</dd>
</dl>

重置数字字体变体(Resetting numeric font variants)

¥Resetting numeric font variants

使用 normal-nums 属性重置数字字体变体：

¥Use the normal-nums property to reset numeric font variants:

<p class="slashed-zero tabular-nums md:normal-nums ...">
  <!-- ... -->
</p>

响应式设计(Responsive design)

¥Responsive design

在 font-variant-numeric 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

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

请参阅 变体文档 详细了解如何使用变体。