移动端 font-variant-numeric 失效主因是字体未内置 OpenType 数字特性（如 tnum/lnum），系统默认中西文字体普遍仅支持比例数字；需用 font-feature-settings 实测验证，或换用已知支持的字体栈。
font-variant-numeric 在 iOS/Android 上没反应，先查字体是否真支持
直接结论：移动端（尤其是 iOS Safari 和 Android Chrome）里 font-variant-numeric 失效，90% 是因为当前使用的字体压根没打包对应 OpenType 特性——不是你 CSS 写错了，是字体文件里根本没 “tnum”（等宽数字）、“lnum”（现代数字）或 “oldstyle-nums” 这些字形。
系统默认中文字体（如 “PingFang SC”、“HarmonyOS Sans”、“MiSans”）和西文字体（如 “San Francisco” 的常规版、“Roboto” 的基础子集）大多只提供 proportional-nums（比例数字），且不带 tabular-nums 或 oldstyle-nums 变体。即使你写了 font-variant-numeric: tabular-nums，浏览器也只会静默忽略。
- 用 Safari / Chrome 开发者工具检查 computed 样式：
getComputedStyle(el).fontVariantNumeric返回空字符串或"normal"，说明该属性未被识别或字体不支持 - 在 iOS 上，
San Francisco仅 Pro 版本（如 SF Pro Display）才含tabular-nums；系统默认用的是 SF UI Text，不支持 - Android 端的 Roboto 默认 Web Font（Google Fonts 提供的 roboto-v20-latin）通常不含
tnum特性，需手动加载带特性的子集（如&display=swap&text=0123456789+font-display=optional）
如何验证字体是否支持 tabular-nums 或 oldstyle-nums
别靠猜，用实测定位问题根源。最可靠的方法是绕过 CSS，直接调用底层 OpenType 控制：
- 写一行纯数字测试文本：
<span class="test-num">0123456789</span> - 加两组对比样式：
.test-num.tnum { font-feature-settings: "tnum"; } .test-num.lnum { font-feature-settings: "lnum"; } - 如果
.tnum下数字明显等宽（比如 “1” 和 “0” 占据相同水平空间），而.lnum下 “1” 更窄、“0” 更宽，则说明字体确实内置了这些特性，font-variant-numeric应该也能生效——此时问题转向兼容性或继承链 - 若两组都无变化，基本可断定字体不支持；换用已知支持的字体栈测试，例如：
font-family: "SF Mono", "Fira Code", monospace;
移动端常见失效组合与绕过方案
某些组合下，font-variant-numeric 会被强制降级，即使字体支持也无法触发：
- iOS Safari ≤15.3、Chrome for Android ≤102：完全忽略该属性，返回
normal；必须用font-feature-settings: "tnum"替代 - 使用
font简写时漏掉font-variant-numeric：它不会继承，也不会被简写自动带上，例如font: 16px/1.4 "Helvetica Neue"会清空之前设的font-variant-numeric - CSS-in-JS 或 Shadow DOM 场景下，父级样式未穿透，导致子元素未继承字体声明；显式在目标元素上重复声明
font-family和font-variant-numeric - Web Font 加载未完成时，浏览器用 fallback 字体渲染，而 fallback 字体（如
sans-serif）几乎都不支持这些特性；加font-display: optional或用@font-face的font-display: swap+ loading 状态兜底
真正容易被忽略的一点
就算你确认字体支持、浏览器版本够新、CSS 写法正确，font-variant-numeric 仍可能“看起来没变”——因为它的效果只在数字字符（U+0030–U+0039）上生效，对负号（− U+2212）、小数点（.）、千分位逗号（,）、货币符号（¥、$）或单位（kg、℃）完全无效。表格里写 ¥123.45，哪怕 123.45 对齐了，前面的 ¥ 和后面的 .45 依然会破坏视觉一致性。这时候不能只靠一个 CSS 属性，得拆结构、分样式、控宽度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
