数字的对齐与字形：font-variant-numeric
做财务报表、价格列、排行榜、倒计时，数字列往往无法对齐——因为不少字体默认用比例宽度(proportional)数字：1 窄、0 宽，每行宽度都不一样。到底哪种是默认得看字体：用 canvas 量 100px 下 0–9 的 advance（Chrome 151 / macOS，核对于 2026-08），Arial、Helvetica、Verdana、Times New Roman 的十个数字宽度完全相同，tabular-nums
在它们身上看不出变化；Georgia（42.97~61.38px）、系统 UI 字体（44.34~61.72px）与 PingFang SC（40.1~60px）才是比例宽度。font-variant-numeric: tabular-nums 一条声明就把所有数字换成等宽字形，列随之对齐，而且这是字体里现成的另一套字形，并非用 letter-spacing 强行调整。
1 · 各取值与适用场景
| 取值 | 底层 tag | 作用 | 适用场景 |
|---|---|---|---|
| tabular-nums | tnum |
每个数字等宽，列对齐 | 报表 / 价格列 / 倒计时 / 排行榜 |
| proportional-nums | pnum |
每个数字按自身宽度 | 正文里夹的数字，读起来更自然 |
| lining-nums | lnum |
全部数字坐在 baseline 上、等高 | 和大写字母 / UI 数字并排 |
| oldstyle-nums | onum |
有升降部的「老式数字」，像小写字母 | 长篇正文，融进文字更柔和 |
| slashed-zero | zero |
给 0 划一道斜杠 |
编号 / 序列号，防 0 与 O 混 |
| diagonal-fractions | frac |
把 1/2 排成真分数 |
配方、尺码、比分 |
| stacked-fractions | afrc |
上下叠排的分数 | 数学与工程排版 |
| ordinal | ordn |
1st / 2nd 的后缀抬成上标 |
日期与名次 |
同一族里 figure（lining / oldstyle）、spacing（tabular / proportional）、fraction（diagonal / stacked）三组各自互斥，跨组可组合，如 font-variant-numeric: tabular-nums slashed-zero。字体侧还有一层限制：OpenType
注册表写明 zero 只作用于 lining figures，与 onum 互斥，因此 oldstyle-nums slashed-zero 虽然 CSS 语法合法，多数字体不会同时生效。效果取决于字体是否含对应字形——本页样本用 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 的浏览器支持情况——现代浏览器普遍支持，可放心用于报表对齐。