CSS font-variant-numeric 怎样对齐表格中的数字宽度

表格里的数字看起来左右不齐，通常不是 text-align: right 写错了，而是当前字体使用了比例数字：1、8、0 的字形宽度不同。要让价格、数量和统计值按数字网格排列，可以给数字单元格设置 font-variant-numeric: tabular-nums;。它要求字体提供等宽数字字形，文字本身和小数精度都不会被改写。

官方参考：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-variant-numeric

这次的检查基线很简单：准备 4 类样本——单数字、多位数字、负数和小数——观察同一列的右边界是否稳定；再确认普通正文没有被意外改成数字表格样式。

先分清字形宽度和单元格对齐

text-align: right 只把文本放到单元格右侧，并不会让数字内部的每一位占用同样宽度。固定列宽也只是固定容器，不能消除不同数字字形带来的视觉跳动。

在数字列启用 tabular-nums

最小写法是把属性放到数字列的公共类上，而不是整个页面的 body。这样只有金额、数量或编号列使用等宽数字，普通正文仍保留字体默认的比例数字。

.report-table {
  border-collapse: collapse;
}

.report-table th,
.report-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #dfe3e8;
}

.report-table .number-cell {
  /* 让 0 到 9 使用等宽数字字形，减少列内视觉跳动。 */
  font-variant-numeric: tabular-nums;
  /* 数字列靠右，便于比较整数位和小数位。 */
  text-align: right;
  white-space: nowrap;
}

tabular-nums 对应 OpenType 的 tnum 特性。它解决的是数字字形的等宽问题；右对齐仍然建议保留，因为读者比较金额或数量时，整数位和小数位会更容易扫读。

用统一样本检查对齐结果

不要只拿连续的 1111 检查，因为不同字体中重复窄字形容易掩盖问题。可以用下面的样本覆盖 0、8、负号和小数，再用浏览器的实际字体加载状态检查。

项目
数量
金额
基础
8
80.00
混合
1018
1,018.50
负数
-20
-208.80

可复现的验收指标是：同一列在相同字体、字号和字重下，数字的最后一位应落在相同的右侧比较线；同时检查负号和小数点不会把列撑出横向滚动。若只需要视觉核对，不必为了配图运行本地代码或抓取浏览器截图。

字体不生效时检查这三个边界

第一，tabular-nums 依赖当前字体提供对应的数字特性；换成另一套字体后，表现可能不同。第二，属性是可继承的，若把它写在表格容器上，表头和普通文本也可能继承，最好给数字单元格单独加类。第三，font-feature-settings: "tnum" 属于更底层的 OpenType 开关，优先使用语义更清晰的 font-variant-numeric，只有在需要控制字体特性集合时才考虑它。

/* 只让金额列继承数字特性，避免影响表头和备注。 */
.report-table .amount,
.report-table .quantity {
  font-variant-numeric: tabular-nums;
}

/* 字体加载失败时，仍保留右对齐和不换行的可用降级。 */
.report-table .number-cell {
  text-align: right;
  white-space: nowrap;
}

如果换字体后数字仍然不等宽，不能靠增加 letter-spacing 假装解决：它会同时改变小数点、负号和数字之间的间隔。应先确认实际使用的字体，再决定是否更换为明确支持表格数字的字体。

常见问题

tabular-nums 会把数字变成等宽字体吗？

不会。它只请求当前字体的等宽数字字形，英文字母和中文仍使用当前字体的正常字形。

为什么设置后看起来没有变化？

常见原因是字体没有提供 tnum 特性，或者选择器没有命中真正显示数字的元素。先检查计算后的字体和元素的计算样式。

只设置右对齐可以吗？

如果只要求单元格靠右，可以；如果还要让不同数字的位宽稳定、便于纵向比较，则应同时使用 tabular-nums。