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 |
- 字体
- 概述
- 字体说明
- 字体家族
- 字阶与行高
- 字重
- 字体使用规范