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.

相关推荐
愈努力俞幸运5 小时前
volta教程 下载安装使用
前端
冰暮流星5 小时前
javascript短路运算
开发语言·前端·javascript
qq_419854055 小时前
移动端开发:h5应用开发
前端
alonewolf_995 小时前
JVM调优实战与常量池深度解析:从Arthas到字符串常量池
前端·jvm·chrome
zuozewei5 小时前
零基础 | 从零实现ReAct Agent:完整技术实现指南
前端·react.js·前端框架·智能体
白柚Y5 小时前
react的hooks
前端·javascript·react.js
vueTmp5 小时前
个人开发者系列-上线即“爆火”?那些掏空你 Cloudflare 额度的虚假繁荣
前端·nuxt.js
i7i8i9com5 小时前
React 19+Vite+TS学习基础-1
前端·学习·react.js
CHANG_THE_WORLD5 小时前
switch case 二分搜索风格
前端·数据库
我的golang之路果然有问题5 小时前
实习中遇到的 CORS 同源策略自己的理解分析
前端·javascript·vue·reactjs·同源策略·cors