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.

相关推荐
Lvan的前端笔记3 小时前
docker:每个前端项目一个 Nginx 容器还是只有一个Nginx容器
前端·nginx·docker
三天不学习3 小时前
Egg.js 4 突然爆火,原因是否归结于AI 原生落地需求爆发?
前端·javascript·全栈·egg.js
xcs194054 小时前
前端 vue 的前端页面debugger 进不去
前端·javascript·vue.js
明月_清风5 小时前
Deno 终局来了:从挑战 Node 到被 Cloudflare 收编
前端·后端·node.js
Csvn6 小时前
框架性能优化
前端
回眸&啤酒鸭8 小时前
【回眸】OpenSwarm 多智能体协作系统实战指南
大数据·前端·人工智能
用户69371750013848 小时前
2026,程序员的时代拐点到了
android·前端·后端
大龄秃头程序员8 小时前
一次 iBeacon + BLE 无感解锁方案的实现记录
前端
小兔子8 小时前
Python 的 GIL 与 free-threading:3.13 之后「去 GIL」走到哪一步了
前端
IT_陈寒8 小时前
SpringBoot自动配置差点让我加班到凌晨
前端·人工智能·后端