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.

相关推荐
ricardo197316 分钟前
手写一个虚拟列表,万级数据滚动 FPS 稳定 60 帧
前端
小KK_19 分钟前
新手必看:一篇文章带你搞懂JavaScript作用域
前端
万邦科技Lafite20 分钟前
如何通过 item_search_img API 接口获取淘宝商品信息
java·前端·数据库
AlbertZein27 分钟前
干了三年全栈才悟到:TS + React 这套组合,真不是堆技术堆出来的
前端
化为五月27 分钟前
我把 Hermes 接进了飞书,结果卡在“能发消息但就是不回”
前端
ClouGence30 分钟前
豆包收费之后,我找到了更好用的 AI 工具
前端·人工智能·后端·ai·ai编程·ai写作
aircrushin31 分钟前
音乐节结束前,拿手机📱搓了一个工具
前端·后端
风骏时光牛马1 小时前
Cube Sandbox部署问题及解决方法
前端
Bug-制造者1 小时前
深入理解 HTML5 Web Workers:提升网页性能的关键技术解析
前端·html·html5
Sylvia33.1 小时前
足球数据API接入实战:从认证到实时比分推送的完整指南
java·开发语言·前端·c++·python