skip to content

CSS3
tabular-nums:让数字对齐

在排版数字时,相等宽度的数字能带来更整齐的视觉效果。比如账单、数字表格这类需要对齐的场景,使用等宽数字(Tabular Numbers)就很适合。

使用方式

/* 标准写法(推荐) */
font-variant-numeric: tabular-nums;

/* 等效的 OpenType 特性写法 */
font-feature-settings: 'tnum';

效果对比

以"¥1234.56"为例:

特征数字默认(比例数字)等宽数字(tnum)
1
4

实际效果取决于字体是否支持 OpenType 特性,tnumonum(旧体数字)是最常见的数字 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; /* 比例(默认) */

注意事项

  1. 字体支持:只有部分字体支持 OpenType 特性,如 Noto Sans、Roboto、Inter 等现代字体
  2. 浏览器支持font-variant-numeric 兼容性良好,font-feature-settings 在现代浏览器中也已完全支持
  3. 降级方案:如果字体不支持,浏览器会忽略这些属性,显示默认的比例数字