跳到正文
前端设计博物馆
T-08

等宽数字

Tabular Numbers

让每个数字占一样宽，数值变化时整行不会左右抖。

  • 又叫：
  • 等宽数字
  • 数字不跳
  • 表格数字
  • tabular figures
  • tabular-nums
  • monospaced digits
  • lining figures
展厅
排版与文字
形态
固定舞台
播放
常驻循环
关键词
纯 CSS / 字体特性 / 可以直接用
T-08形态 固定舞台播放 常驻循环Tabular Numbers

参数工作台

复制给 AI

随参数实时更新

给这个会变数字的组件加 font-variant-numeric: tabular-nums（等宽数字，旧写法 font-feature-settings: "tnum"），每 700ms 更新一次数值时整行宽度不要变。位数会变化的话（9 → 10）再给 min-width 或固定宽度容器并右对齐，表格里的数字统一 text-align: right。

什么时候用

  • 倒计时、计时器、播放进度这类数字一直在变的组件
  • 实时统计、价格、余额，数字跳动时会牵动整行宽度
  • 表格里要让小数点或个位对齐成一条竖线

适用场景：文字 / 列表 / 页面

推荐取值

现代写法
font-variant-numeric: tabular-nums
旧写法
font-feature-settings: "tnum"
对齐
配合 text-align: right
位宽变化
给 min-width 或等宽容器，别让行宽跟着跳
使用范围
只给需要对齐的数字片段，正文保持默认比例数字

别搞混

  • 和「数字滚动」的区别

    数字滚动管的是数值怎么从 A 变到 B；等宽数字管的是每个数字占多宽。两者经常一起用——滚动时行宽不变，看起来才稳。

    容易混的去看「数字滚动」

  • 和「默认比例数字」的区别

    默认是比例数字（proportional）：1 比 8 窄，正文里更好看；一旦数字要纵向对齐或持续变化，就该切成等宽。

容易踩的坑

  • tabular-nums 需要字体支持这个 OpenType 特性，艺术字体可能没有，会悄悄退化成默认比例数字
  • 只加等宽还不够：位数变化（9 → 10）时整块仍会变宽，要给 min-width 或预留宽度并右对齐
  • 表格里要配合 text-align: right 且小数位数统一，否则照样对不齐
  • font-feature-settings: "tnum" 是等价的旧写法，优先用 font-variant-numeric，可读性更好
  • 不要为了数字把整站换成等宽字体：只给需要的片段加这个特性

无障碍降级

等宽数字是静态特性，不需要降级；只有配合数字滚动时，prefers-reduced-motion 下直接显示终值。

关键词

  • font-variant-numeric
  • tabular-nums
  • font-feature-settings tnum
  • lining-nums
  • tabular figures
  • text-align: right
  • min-width
  • OpenType feature

参考

相关展品