font-variant-numeric: tabular-nums 无效是因为字体本身未提供等宽数字字形，该css属性仅提示浏览器启用，不强制生成；需选用明确支持tnum特性的字体（如fira code、cascadia code）并验证生效。
等宽数字（tabular figures）在 HTML 中不是靠 HTML 标签控制的，而是通过 CSS 的 font-variant-numeric 属性启用，且依赖字体本身是否提供等宽数字字形。多数系统默认字体（如 Arial、Helvetica、系统 San-serif）不支持，直接写 CSS 不会生效。
为什么 font-variant-numeric: tabular-nums 没反应？
常见错误是只加 CSS 却忽略字体支持——这个属性只是“告诉浏览器：请从当前字体里挑等宽数字来用”，如果字体压根没打包等宽数字（比如大多数免费 Web 字体或未开启 OpenType 特性的系统字体），就会静默回退到比例数字（proportional nums），看起来还是左对齐不齐。
- macOS 的
.SF Pro Display、Menlo默认支持；Windows 的Cascadia Code、Consolas也支持（尤其在等宽场景下） - Google Fonts 中明确标注 “includes tabular figures” 的才可靠，例如
IBM Plex Mono、Fira Code、Source Code Pro - 使用
@font-face加载自定义字体时，需确认其 OpenType 特性已启用（某些字体工具导出时会默认关掉tnum特性）
如何验证当前字体是否真输出了等宽数字？
最直接的办法是用固定宽度容器 + 数字串对比视觉对齐，同时打开浏览器开发者工具的“Computed”面板，检查 font-variant-numeric 是否计算为 tabular-nums，再点开 font-family 看最终生效的是哪个字体。
快速测试代码：
<style>
.test-nums {
font-family: 'Fira Code', 'Cascadia Code', monospace;
font-variant-numeric: tabular-nums;
font-size: 16px;
letter-spacing: 0;
}
</style><div class="test-nums">1234567890</div>
<div class="test-nums">0000000000</div>
<div class="test-nums">9999999999</div>
如果三行数字的每一位都严格纵向对齐（尤其注意 1 和 0 的宽度），说明生效；否则说明字体不支持或被其他样式覆盖。
兼容性与 fallback 写法要注意什么？
IE 完全不支持 font-variant-numeric，Edge 16+、Chrome 52+、Firefox 48+ 支持。但即使现代浏览器，也要防住字体加载失败导致回退到不支持的字体。
- 务必在
font-family列表末尾加上可靠的等宽 fallback，如monospace或ui-monospace（macOS/iOS 系统等宽字体） - 避免只写
font-variant-numeric: tabular-nums—— 加上font-feature-settings: "tnum"可作为降级补充（部分旧版 Safari/Chrome 需要） - 不要对非等宽字体（如
system-ui、Segoe UI）强求等宽数字，它们的设计目标本就不含此特性
真正起作用的永远是「字体 + CSS 属性」组合，单独改哪一边都白搭；调试时优先查 computed font-family，再查该字体是否带 tnum 特性，比反复调 CSS 更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
