font-variant-numeric: tabular-nums 仅使数字0–9等宽对齐，不影响字母、符号、汉字等其他字符宽度，需字体支持且常需配合等宽字体和结构分离实现精准对齐。
font-variant-numeric: tabular-nums 只对数字生效，不改变字母或符号宽度
直接结论：font-variant-numeric: tabular-nums 的作用是让数字字符（0–9）使用等宽字形（即每个数字占相同水平空间），从而在表格、价格列、序号列中实现垂直对齐。它不会影响字母、标点、汉字或自定义符号的宽度，也不能“强制”非数字内容等宽。
常见错误现象：给整个 <td> 设置 <code>font-variant-numeric: tabular-nums 后，含单位的金额如 "¥123.45" 或带括号的编号如 "(1)" 仍不对齐——因为 ¥、.、(、) 不受该属性控制。
- 仅支持数字字符：必须确保目标文本中纯数字部分连续且未被其他字符打断
- 需字体支持：不是所有字体都提供 tabular-nums 字形，如系统默认的
San Francisco（macOS）、Segoe UI（Windows）和开源字体Fira Code、IBM Plex Mono支持较好；而部分中文字体（如Microsoft YaHei）可能完全忽略该属性 - 推荐搭配
font-family显式指定：例如font-family: "SF Mono", "Fira Code", monospace;
表格中混合内容对齐要拆开处理，不能只靠 font-variant-numeric
真实业务表格常含“数字+单位+文字”，比如 "24 kg"、"−17℃"、"100%"。此时 tabular-nums 只能对齐 "24"、"17"、"100" 这段，但单位宽度不一致会导致整体错位。
可行做法是把数字和单位分离到不同标签，再分别控制：
<td> <span class="num">24</span><span class="unit"> kg</span> </td>
-
.num应用font-variant-numeric: tabular-nums+ 等宽字体 -
.unit使用固定宽度（如width: 2em）或text-align: left配合padding-left对齐 - 负号
−（U+2212，非短横-）属于 Unicode 数字相关符号，在多数支持字体中会随tabular-nums对齐；但若显示为短横，需手动替换或用::before伪元素插入
兼容性要注意：Safari 15.4+ 和 Chrome 103+ 才稳定支持 tabular-nums
旧版浏览器（尤其是 Safari ≤15.3、Firefox ≤91）会直接忽略 font-variant-numeric，回退为比例字体（proportional nums），导致数字列明显参差。
- 检查方式：在目标浏览器中打开
getComputedStyle(document.querySelector(".num")).fontVariantNumeric，返回"tabular-nums"才表示生效 - 渐进增强建议：先用
font-family: monospace保底（虽粗糙但强等宽），再叠加font-variant-numeric提升可读性 - 不要依赖
@supports (font-variant-numeric: tabular-nums)做功能开关——部分旧浏览器虽声明支持，实则渲染异常
替代方案：CSS 中的 text-align + width 组合更可控
当 font-variant-numeric 因字体/兼容性失效，或需对齐含小数点的浮点数（如 "1.5"、"12.0"）时，纯 CSS 控制反而更稳。
- 给数字单元格设
text-align: right，再配合min-width（如min-width: 5ch）预留足够空间 - 用
ch单位比em更准：1ch ≈ 当前字体中"0"的宽度，天然适配等宽数字场景 - 对齐小数点？CSS 目前无原生支持，需借助
tabular-nums+ 小数点后补零（如"1.50"、"12.00"）或 JS 格式化后再渲染
真正难的不是加一行 font-variant-numeric，而是确认字体是否提供对应字形、浏览器是否正确解析、以及混合内容里哪些部分其实根本没被这个属性覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
