font-variant-numeric: tabular-nums 能解决数字跳动，因其启用字体内置等宽数字字形，使0–9、−、.占相同水平空间，避免比例数字导致的重排；但需字体支持tnum特性，否则无效。
font-variant-numeric: tabular-nums 为什么能解决数字跳动
它不是让整个元素变等宽，而是告诉浏览器：对数字字符 0–9（以及 Unicode 负号 − U+2212 和小数点 .）启用字体内置的等宽数字字形（tabular numerals）。衬线字体如 Georgia 默认用比例数字（1 窄、8 宽），一刷新就晃；加了这行 CSS 后，所有数字占相同水平空间，倒计时从 9 到 10 不再触发重排。
必须搭配支持 tnum 特性的字体才生效
写了 font-variant-numeric: tabular-nums 却没变化？大概率是字体不带 tnum OpenType 特性。系统字体里：
-
SF Mono、Fira Code、IBM Plex Mono均完整支持 -
Georgia（macOS / Windows 内置版）支持，但 Google Fonts 的精简版可能不打包tnum -
PingFang SC（iOS）、Roboto（Android Web 字体子集）、HarmonyOS Sans几乎都不含该特性
验证方式：getComputedStyle(el).fontVariantNumeric 返回 "tabular-nums" 才算真正激活；否则 fallback 为比例数字。
表格中数字右对齐 ≠ 真正垂直对齐
text-align: right 只控制内容在单元格内的水平位置，不能解决 “1.23”、“12.34”、“123.45” 小数点错位问题。真正对齐靠两层：
- 外层：
td.numeric { text-align: right; } - 内层（关键）：
.numeric { font-variant-numeric: tabular-nums; font-family: "SF Mono", monospace; }
注意：font-variant-numeric 只影响数字本身，¥、%、kg 等单位不受控。混合内容如 "24 kg" 必须结构分离：<span class="num">24</span><span class="unit">kg</span>，再分别控制宽度或对齐。
旧浏览器兼容要兜底，别信 @supports
Safari ≤15.3 和 Firefox ≤91 完全忽略 font-variant-numeric，且 @supports (font-variant-numeric: tabular-nums) 检测不可靠——可能返回 true 但渲染无效。稳妥做法是：
- 强制降级：
font-family: "SF Mono", monospace;（所有浏览器都强制等宽，只是字母也被拉平） - 渐进增强写法：
font-family: "SF Mono", "Fira Code", monospace; font-variant-numeric: tabular-nums; - 避免用
font-feature-settings: "tnum"替代，拼错引号或大小写会整条规则失效
最易被忽略的一点：移动端字体子集往往默认剔除 tnum 特性，即使你写了属性也没用——得确认 Web Font 加载时显式包含 &text=0123456789 或联系供应商开启该特性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
