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.

相关推荐
Moment1 分钟前
记录一次修改 PNPM 版本,部署 NextJs 服务时导致服务器崩溃的问题 😡😡😡
前端·javascript·后端
浪裡遊3 分钟前
css面试题1
开发语言·前端·javascript·css·vue.js·node.js
钮钴禄·爱因斯晨9 分钟前
不只是字符串:Actix-web 路由与 FromRequest的类型安全艺术
前端·安全
杜子不疼.14 分钟前
仓颉语言构造函数深度实践指南
java·服务器·前端
IT_陈寒16 分钟前
我用这5个JavaScript性能优化技巧,让页面加载速度提升了60%
前端·人工智能·后端
风一样的美狼子17 分钟前
仓颉语言 LinkedList 链表实现深度解析
java·服务器·前端
艾小码35 分钟前
2025年,我为什么建议你先学React再学Vue?
前端·vue.js·react.js
谢尔登36 分钟前
【GitLab/CI】前端 CI
前端·ci/cd·gitlab
Predestination王瀞潞2 小时前
WEB前端技术基础(第四章:JavaScript-网页动态交互语言)
前端·javascript·交互
静西子3 小时前
Vue3路由
前端·javascript·vue.js