font-variant-numeric: tabular-nums 是启用字体中已有的等宽数字字形（tnum特性）的声明，非生成器；若字体未内置该OpenType特性（如SF UI Text、Roboto默认子集），则完全无效，即使getComputedStyle返回"tabular-nums"。
font-variant-numeric: tabular-nums 是什么
它不是“开启对齐”的开关，而是告诉浏览器：请用字体中已有的等宽数字（tabular numerals）字形来渲染 0–9。如果字体没打包这个 OpenType 特性（tnum），这行 CSS 就完全无效——你看到的还是比例数字（proportional nums），哪怕样式面板里显示它已生效。
为什么写了却没变化
常见错误现象：font-variant-numeric: tabular-nums 加了，数字宽度依然忽宽忽窄；getComputedStyle(el).fontVariantNumeric 返回 "tabular-nums"，但视觉毫无改变。
- 字体本身不支持：
SF UI Text、Roboto v20-latin、Microsoft YaHei默认不含tnum特性；iOS 的系统SF Pro Display支持，但SF Pro Text不一定 - 用了 Web Font 却没加载带数字特性的子集：Google Fonts 链接需加
&text=0123456789参数才能触发 tnum 字形打包 - 作用对象不对：给
<td>设置了该属性，但里面混着¥、%、℃等非数字字符——这些不受影响，整体仍歪斜
怎么写才真正起效
必须三者同时满足：正确字体 + 正确属性 + 正确结构。
- 显式声明支持字体：
font-family: "SF Mono", "Fira Code", "IBM Plex Mono", monospace;（别依赖系统默认 Georgia，它虽支持但不可控） - 属性加在数字容器上：
.num { font-variant-numeric: tabular-nums; text-align: right; }，而不是父<table> - 混合内容必须拆开：
<span class="num">123.45</span><span class="unit">¥</span>，单位单独控制宽度或对齐 - 负号要用 Unicode 减号
−（U+2212），不是短横-；否则不会随tabular-nums对齐
兼容性与降级怎么做
Safari ≤15.3 和 Firefox ≤91 会直接忽略 font-variant-numeric，返回 "normal"；@supports 检测不可靠，别信。
立即学习“前端免费学习笔记（深入）”；
- 保底用
font-family: monospace：所有浏览器都强制等宽，只是字母汉字也被拉平，可读性略差但稳定 - 渐进增强写法：
font-family: "SF Mono", monospace; font-variant-numeric: tabular-nums; - 真要验证是否生效？用 JS 实测宽度：
el.textContent = "0123456789";，对比纯比例字体下同字符串的宽度波动（需同字号同字体）
tnum 特性——这点在移动端尤为致命，因为系统字体往往阉割了数字变体。 
