font-variant-numeric: tabular-nums 无效的主因是字体未内置 tnum OpenType 特性，CSS 仅作开关而非生成器；需选用明确支持 tnum 的字体（如 Fira Code、SF Mono）并配合 font-feature-settings: "tnum" 兼容旧浏览器。
font-variant-numeric: tabular-nums 为什么在某些字体下完全没反应
直接原因是字体文件没打包 tnum OpenType 特性，CSS 只是“开关”，不是“生成器”。比如 Windows 默认的 Microsoft YaHei、iOS 的 PingFang SC、Android 的 Roboto（Google Fonts 默认子集）都不含等宽数字字形，写了也白写。
验证方法很简单：用开发者工具查 getComputedStyle(el).fontVariantNumeric，返回 "tabular-nums" 仅说明 CSS 被解析了，不代表渲染生效；真正要看的是 "1" 和 "8" 并排时宽度是否一致。
- 支持稳定的字体：macOS 上
SF Mono、Menlo；Windows 上Consolas、Segoe UI - 跨平台推荐开源字体：
Fira Code、IBM Plex Mono、JetBrains Mono——这些明确打包了tnum，且压缩后体积可控 - 避坑：别只写
monospace，它强制所有字符等宽，字母/汉字可读性会明显下降
旧版 Safari / Firefox 下 font-variant-numeric 被静默忽略怎么办
Safari ≤15.3 和 Firefox ≤91 会直接跳过 font-variant-numeric: tabular-nums 声明，getComputedStyle 返回 "normal" 或空字符串，样式面板里也看不到该属性——不是报错，而是彻底不认。
@supports (font-variant-numeric: tabular-nums) 在这些旧版本中检测不可靠：Safari 可能返回 true 却不渲染，Firefox 常返回 false 即使你写了属性。
立即学习“前端免费学习笔记（深入）”；
- 替代方案：用
font-feature-settings: "tnum"替代，它更底层，在 Safari 14+ / Firefox 88+ 就已稳定支持 - 渐进增强写法：
font-family: "SF Mono", "Fira Code", monospace; font-feature-settings: "tnum"; - 注意：
font-feature-settings不支持多值叠加（如同时开tnum和lnum），需手动合并字符串，易出错
表格里数字+单位混合时对齐失效，不是属性问题而是作用域错了
font-variant-numeric: tabular-nums 只作用于数字字符（U+0030–U+0039），对 "¥"、"%"、"kg"、"℃" 这类单位完全无效。给整个 <td> 加该属性，等于只修了一半路。
<p>真实可行的解法是结构分离：</p>
<ul>
<li>把纯数字部分包进 <code><span class="num"></span>，加 font-variant-numeric: tabular-nums + 显式等宽字体栈
<span class="unit"></span>，设固定 width: 2em 或统一 padding-left + text-align: left
−（U+2212）在多数支持字体中会随 tabular-nums 对齐；若显示为短横 -，需手动替换或用 ::before 插入移动端字体不带 tnum 特性才是真瓶颈
iOS 的 SF UI Text（系统默认）和 Android 的 Roboto（基础 Web Font）几乎都不含等宽数字变体。San Francisco 只有 Pro 版本（如 SF Pro Display）才支持 tnum；Google Fonts 的 roboto-v20-latin 默认也不含，除非你手动加载带 &text=0123456789 参数的定制子集。
最可靠验证方式是绕过 CSS，直接调用底层控制：
.test-num.tnum { font-feature-settings: "tnum"; }
.test-num.lnum { font-feature-settings: "lnum"; }
如果两组都无变化，基本可断定字体不支持——此时换字体栈比调 CSS 更有效。
复杂点在于：即使字体支持、浏览器支持，若数字被包裹在 <mn></mn>、.mord 或 KaTeX 渲染节点中，font-variant-numeric 也会被覆盖。这时候得去改 font-feature-settings 或覆盖特定 class 的样式。
