Font字体
标记了一个(或封装一组)操作命令,响应用户点击行为,触发相应的业务逻辑。
概述
字体是体系化界面设计中最基本的构成之一,我们的用户通过文本理解内容和完成工作,科学的字体体系将大大提升用户的阅读体验及工作效率。
字体说明
body使用字体即通用字体为:PingFang SC, Microsoft Yahei, Hiragino Sans GB,sans-serif,找不到某种字体时默认使用下一个。
字体家族
数字字体

13829

DIN Condensed

优先字体

13829

DIN Aliternate

备用字体

13829

Arial

次级备用字体

字阶与行高

字阶和行高决定着一套字体系统的动态与秩序之美。字阶是指一系类有规律的不同尺寸的字体。行高可以理解为一个包裹在字体外面的无形的盒子。行高是字体的1.5倍。

受到5音阶以及自然律的启发定义了10个不同尺寸的字体以及与之相对应的行高。

Font Size 12 14 16 20 22 24 26 28 30 32 34 36 38 40 ...
Line Height 18 21 24 30 33 36 39 42 45 48 51 54 57 60 ...
字重

字重的选择同样基于秩序、稳定、克制的原则。多数情况下,只出现regular以及medium的两种字体重量,分别对应码中的400和500。在英文字体加粗的情况下会采用semibold的字体重量, 对应码中的600。

字体家族

Regular 400

字体家族

Medium 500

字体家族

Semibold 600

字体使用规范
中文字体 示例 颜色 字号 行高 class
主标题 标题1 222222 18px 27 principal-title
次级标题 标题2 222222 16px 24 secondary-title
正文 正文 222222 14px 21 mainbody-text
辅助文字 辅助文字 555555 14px 21 assistant-text
失效文字 失效文字 555555 12px 18 invalid-text
链接文字 链接文字 1875f0 12px 18 linked-text
  • 字体
  • 概述
  • 字体说明
  • 字体家族
  • 字阶与行高
  • 字重
  • 字体使用规范