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

引言

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

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

背景/原理

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

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