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><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<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 的样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
