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.

相关推荐
铅笔侠_小龙虾3 小时前
动手实现简单Vue.js ,探索Vue原理
前端·javascript·vue.js
哟哟耶耶5 小时前
Starting again-02
开发语言·前端·javascript
Apifox.5 小时前
Apifox 9 月更新| AI 生成接口测试用例、在线文档调试能力全面升级、内置更多 HTTP 状态码、支持将目录转换为模块
前端·人工智能·后端·http·ai·测试用例·postman
Kitasan Burakku5 小时前
Typescript return type
前端·javascript·typescript
叁佰万5 小时前
前端实战开发(一):从参数优化到布局通信的全流程解决方案
前端
笔尖的记忆5 小时前
js异步任务你都知道了吗?
前端·面试
光影少年5 小时前
react生态
前端·react.js·前端框架
golang学习记6 小时前
从0死磕全栈之Next.js 中的错误处理机制详解(App Router)
前端
力Mer6 小时前
console.log()控制台异步打印与对象展开后不一致问题
前端·javascript