Lzh on GitHub

font-variant-numeric

用于控制数字字体的工具。

快速参考

类别样式
normal-numsfont-variant-numeric: normal;
ordinalfont-variant-numeric: ordinal;
slashed-zerofont-variant-numeric: slashed-zero;
lining-numsfont-variant-numeric: lining-nums;
oldstyle-numsfont-variant-numeric: oldstyle-nums;
proportional-numsfont-variant-numeric: proportional-nums;
tabular-numsfont-variant-numeric: tabular-nums;
diagonal-fractionsfont-variant-numeric: diagonal-fractions;
stacked-fractionsfont-variant-numeric: stacked-fractions;

示例

使用序数符号

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

TODO 需要修改

1st

<p class="ordinal ...">1st</p>
字体要求：ordinal 依赖字体是否支持 OpenType 的 ordn 特性。常见支持字体包括：
  • Inter
  • Roboto
  • Fira Sans

使用斜线零

使用 slashed-zero 工具可以在支持的字体中强制显示带斜线的零：

0

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

使用衬线数字

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

1234567890

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

使用旧式数字

使用 oldstyle-nums 工具可以在支持的字体中使用一些数字带降部的数字字形：

1234567890

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

使用比例数字

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

12121

90909

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

使用表格数字

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

12121

90909

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

使用斜线分数

使用 diagonal-fractions 工具可以将斜线分隔的数字替换为支持的字体中的常见斜线分数：

1/2 3/4 5/6

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

使用堆叠分数

使用 stacked-fractions 工具可以将斜线分隔的数字替换为支持的字体中的常见堆叠分数：

TODO 需要修改

1/2 3/4 5/6 

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

堆叠多个工具

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

Subtotal
$100.00
Tax
$14.50
Total
$114.50
<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 属性可以重置数字字体变体：

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

响应式设计

在 font-variant-numeric 工具前加上像 md: 这样的断点变体，以便只在中等屏幕尺寸及以上应用该工具：

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

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