等宽数字 Monospaced Numbers 在界面中的使用

1.概念介绍

1.1 比例字体 (Proportional Font)

1.2 等宽字体 (Monospaced Font)

2.使用场景

2.1 纵向数据展示——便于对比

2.2 动态变化的数字 ——防止抖动

2.3 计算数字宽度的布局——准确定位

3.实现方式

3.1 在设计软件上使用等宽数字

3.2 等宽数字在界面上的实践

font-variant-numeric: tabular-nums;  //不支持IE浏览器
font-feature-settings: "tnum";

广州 · LRD.IM

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store