易笔记易笔记
首页
文章
分类
标签
首页
文章
分类
标签
Claude Code 1工作流 1AI 编程 1效率工具 1LangChain 1Prompt 1Frontend 1cesium 2CSS 10iOS 1Safari 1css 1font 1typography 1ide 1JS 3Flexbox 1PHP 1ThreeJS 23D 2Vue 8Vue 3 1Composition API 1ref 1reactive 1Windows 4KMS 1Vue3 5uni-app 1Form 1Modal 1虚拟滚动 1JavaScript 1浏览器 API 1requestIdleCallback 1性能优化 2组件 1异步组件 1
实现数字等宽对齐 (Tabular Nums)

引言

在开发数据看板、订单列表或倒计时组件时,你是否遇到过数字跳动导致布局抖动的问题?或者在表格中,由于数字 "1" 和 "8" 的宽度不同,导致上下行数字无法完美对齐?

这是因为默认情况下,大多数现代字体使用的是比例数字 (Proportional Figures),即每个数字的宽度根据其字形调整。为了解决这个问题,我们需要启用等宽数字 (Tabular Figures),让每个数字占据相同的宽度。

背景/原理

字体设计中,数字通常有两种宽度模式:

分类: css标签: css, font, typography
日期: 1/21/2026