数字的对齐与字形：font-variant-numeric
做财务报表、价格列、排行榜、倒计时，数字列往往无法对齐——因为大多数字体默认用比例宽度(proportional)数字：1 窄、0 宽，每行宽度都不一样。font-variant-numeric: tabular-nums 一条声明就把所有数字换成等宽字形，列随之对齐，而且这是字体里现成的另一套字形，并非用 letter-spacing 强行调整。
1 · 五类数字字形与适用场景
| 取值 | 作用 | 适用场景 |
|---|---|---|
| tabular-nums | 每个数字等宽，列对齐 | 报表 / 价格列 / 倒计时 / 排行榜 |
| proportional-nums | 每个数字按自身宽度（默认常态） | 正文里夹的数字，读起来更自然 |
| lining-nums | 全部数字坐在 baseline 上、等高 | 和大写字母 / UI 数字并排 |
| oldstyle-nums | 有升降部的「老式数字」，像小写字母 | 长篇正文，融进文字更柔和 |
| slashed-zero | 给 0 划一道斜杠 |
编号 / 序列号，防 0 与 O 混 |
这些值可组合，如 font-variant-numeric: tabular-nums slashed-zero。效果取决于字体是否含对应字形——本页样本用 OpenType 表齐全的 Inter。
关键:tabular-nums 是字体内置的「等宽数字字形」，和 letter-spacing 或等宽字体(monospace)完全不同——它只让数字等宽，字母照旧按比例排，既对齐又不牺牲正文可读性。
2 · 相关链接
- font-variant-numeric · MDN——developer.mozilla.org。各取值的精确定义：figure(lining/oldstyle)、spacing(tabular/proportional)、fraction、ordinal、slashed-zero，以及可组合写法。
- tabular-nums · Can I use——caniuse.com。font-variant-numeric: tabular-nums 的浏览器支持情况——现代浏览器普遍支持，可放心用于报表对齐。