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>

响应式设计

前缀a font-variant-numeric 实用程序 带有像 md: 这样的断点变体,以便仅在中等 屏幕尺寸及以上应用该实用程序

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

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

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