font-variant-numeric

用于控制数字字形变体的工具类。

快速参考

类	属性
normal-nums	font-variant-numeric: normal;
ordinal	font-variant-numeric: ordinal;
slashed-zero	font-variant-numeric: slashed-zero;
lining-nums	font-variant-numeric: lining-nums;
oldstyle-nums	font-variant-numeric: oldstyle-nums;
proportional-nums	font-variant-numeric: proportional-nums;
tabular-nums	font-variant-numeric: tabular-nums;
diagonal-fractions	font-variant-numeric: diagonal-fractions;
stacked-fractions	font-variant-numeric: stacked-fractions;

示例

使用序数字形

使用 ordinal 工具类，在支持该特性的字体中启用序数标记的特殊字形：

1st

<!-- [!code classes:ordinal] -->
<p class="ordinal ...">1st</p>

使用带斜杠的零

使用 slashed-zero 工具类，在支持该特性的字体中强制使用带斜杠的零：

0

<!-- [!code classes:slashed-zero] -->
<p class="slashed-zero ...">0</p>

使用齐线数字

使用 lining-nums 工具类，在支持该特性的字体中使用沿基线对齐的数字字形：

1234567890

<!-- [!code classes:lining-nums] -->
<p class="lining-nums ...">1234567890</p>

使用旧式数字

使用 oldstyle-nums 工具类，在支持该特性的字体中使用部分数字带下伸部的数字字形：

1234567890

<!-- [!code classes:oldstyle-nums] -->
<p class="oldstyle-nums ...">1234567890</p>

使用比例数字

使用 proportional-nums 工具类，在支持该特性的字体中使用比例宽度的数字字形：

12121

90909

<!-- [!code classes:proportional-nums] -->
<p class="proportional-nums ...">12121</p>
<p class="proportional-nums ...">90909</p>

使用等宽数字

使用 tabular-nums 工具类，在支持该特性的字体中使用等宽/表格宽度的数字字形：

12121

90909

<!-- [!code classes:tabular-nums] -->
<p class="tabular-nums ...">12121</p>
<p class="tabular-nums ...">90909</p>

使用斜线分数

使用 diagonal-fractions 工具类，在支持该特性的字体中把用斜杠分隔的数字替换为常见的斜线分数：

1/2 3/4 5/6

<!-- [!code classes:diagonal-fractions] -->
<p class="diagonal-fractions ...">1/2 3/4 5/6</p>

使用堆叠分数

使用 stacked-fractions 工具类，在支持该特性的字体中把用斜杠分隔的数字替换为常见的堆叠分数：

1/2 3/4 5/6

<!-- [!code classes:stacked-fractions] -->
<p class="stacked-fractions ...">1/2 3/4 5/6</p>

组合多个工具类

font-variant-numeric 工具类可以组合使用，因此你可以通过叠加来同时启用多种变体：

Subtotal

$100.00

Tax

$14.50

Total

$114.50

<!-- [!code classes:slashed-zero,tabular-nums] -->
<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>

重置数字字体变体

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

<!-- [!code classes:slashed-zero,tabular-nums,normal-nums] -->
<p class="slashed-zero tabular-nums md:normal-nums ...">
  <!-- ... -->
</p>

响应式设计

使用 md: 等断点变体前缀，即可让 font-variant-numeric 工具类仅在中等及以上屏幕尺寸下生效：

<p class="proportional-nums md:tabular-nums ...">
 Lorem ipsum dolor sit amet...
</p>

在变体文档中了解更多关于使用变体的信息。