在排版数字时,相等宽度的数字能带来更整齐的视觉效果。比如账单、数字表格这类需要对齐的场景,使用等宽数字(Tabular Numbers)就很适合。
使用方式
/* 标准写法(推荐) */
font-variant-numeric: tabular-nums;
/* 等效的 OpenType 特性写法 */
font-feature-settings: 'tnum';
效果对比
以"¥1234.56"为例:
| 特征数字 | 默认(比例数字) | 等宽数字(tnum) |
|---|---|---|
| 1 | 窄 | 宽 |
| 4 | 窄 | 宽 |
实际效果取决于字体是否支持 OpenType 特性,
tnum和onum(旧体数字)是最常见的数字 OpenType 特性。
其他数字相关特性
font-variant-numeric 还支持这些属性:
/* 数字连字 */
font-variant-numeric: diagonal-fractions; /* 1/2 → ½ */
/* 数字位置 */
font-variant-numeric: lining-nums; /* 大写数字:123 */
font-variant-numeric: oldstyle-nums; /* 小写旧体:12₃ */
/* 等宽/比例数字 */
font-variant-numeric: tabular-nums; /* 等宽 */
font-variant-numeric: proportional-nums; /* 比例(默认) */
注意事项
- 字体支持:只有部分字体支持 OpenType 特性,如 Noto Sans、Roboto、Inter 等现代字体
- 浏览器支持:
font-variant-numeric兼容性良好,font-feature-settings在现代浏览器中也已完全支持 - 降级方案:如果字体不支持,浏览器会忽略这些属性,显示默认的比例数字