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.

相关推荐
不好听6137 小时前
从一行 JSX 到屏幕像素:前端开发者必须懂的浏览器渲染管线
前端
恒拓高科WorkPlus7 小时前
企业级内网即时通讯建设模型:BeeWorks内网IM四层架构
前端
前端小李子8 小时前
前端环境变量裸奔?我用 EnvShield 给它穿了件防弹衣
前端
youtootech8 小时前
HarmonyOS《柚兔学伴》项目实战25-我的页面、Web 嵌入与项目总结
前端·华为·harmonyos
小林ixn9 小时前
从零到一理解 React 父子组件通信:手写一个 Todo 应用带你彻底搞懂单向数据流
前端·javascript·react.js
醇氧10 小时前
CountDownLatch / CyclicBarrier / Semaphore 面试高频问答清单
前端·面试·职场和发展
qetfw11 小时前
MXU:Tauri 2 + React 的 MaaFramework 跨平台 GUI 源码
前端·python·react.js·前端框架·开源项目·效率工具
甲维斯11 小时前
我要开始吹牛逼了!Kimi K3 “宇宙无敌”!
前端·人工智能
a11177612 小时前
微光小屋-前端养成小游戏 开源项目
前端