1. 字体排印
  2. font-variant-numeric

字体排印

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

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

使用带斜线的零

使用 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 实用工具来替换字体支持的由斜线分隔的数字为常见堆叠分数

1/2 3/4 5/6

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

堆叠多个实用工具

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

小计
$100.00
$14.50
总计
$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>

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

版权所有 © 2025 Tailwind Labs Inc.·商标政策