css`font-variant-numeric: tabular-nums` 用来控制数字的样式。

font-variant-numeric: tabular-nums; 是 CSS 的 OpenType 字体特性之一，用来控制数字的样式。

tabular-nums: 表示 表格数字，即所有数字的宽度都一样；
这样在对齐表格、金额、计数器、时间等数值时，数字会整齐排列，不会出现 “1” 比 “8” 窄导致错位的情况。

对应的对立选项是：
proportional-nums（比例数字）：数字宽度根据字形自然设计，有的宽有的窄，看起来更优雅，但不利于对齐。

场景

• 表格里的数字列
• 倒计时、时间
• 数据可视化标注的数字
• 金额（对齐小数点钱的数字）

相关属性

font-variant-numeric 还能设置很多 OpenType 数字特性，比如：

lining-nums（顶线数字，默认样式，适合现代文本）

oldstyle-nums（老式数字，数字有上下伸展，像小写字母一样）

proportional-nums / tabular-nums（比例 vs 表格）

slashed-zero（带斜杠的零，用来区分 0 和 O）

See the Pen Untitled by liu874396180 ( @liu874396180) on CodePen.