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

Image for post
Image for post
Image for post
Image for post

1.概念介绍

1.1 比例字体 (Proportional Font)

Image for post
Image for post

1.2 等宽字体 (Monospaced Font)

Image for post
Image for post
Image for post
Image for post

2.使用场景

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

Image for post
Image for post

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

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

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

Image for post
Image for post

3.实现方式

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

Image for post
Image for post
Image for post
Image for post

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

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

Written by

广州 · 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