易笔记易笔记
首页
文章
分类
标签
首页
文章
分类
标签
AI 2cesium 2CSS 8css 1ide 1Electron 1JS 2前端 1Layout 1PHP 1ThreeJS 2Vue 4Vue3 5Windows 4
实现数字等宽对齐 (Tabular Nums)

引言

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

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

背景/原理

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

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