字体规则 #

字体是体系化界面设计中最基本的构成之一。

在 DS 中后台视觉体系中定义字体系统，我们从下面四个方面出发：

1.字体家族
2.主字体
3.字阶、行高和字重
4.字体颜色

1.字体家族 #

优秀的字体系统首先是要选择合适的字体家族。DS 的字体家族中优先使用系统默认的界面字体，力求在不同平台、浏览器下都有最佳展示效果

注：
● 如需弄多一套备用字体库时，两个问题需谨慎考虑：一、性能问题（调用字体包的体积可能会非常大），二、版权问题
● 设计师在设计产品界面高保图时，字体版权问题要谨慎考虑，优先使用下列字体（下图）

2.主字体 #

基于DS中后视觉体系，主要以操作型和数据可视化为主，以13px为主，以保证在多数常用显示器上的用户阅读效率最佳

3.字阶、行高和字重 #

字阶：指一系列有规律的不同尺寸的字体
行高：文本行的基线间的距离。可以理解为一个包裹在字体外面的无形的盒子
字重：指字体的粗细。多数情况下，后台界面只会用到 normal 以及 medium 两种字重，分别对应代码中的 400 和 500。使用英文字体、或加大加粗标题时，会采用bold 字重，对应代码中的 700
DS后台系统常用字体大小为 12px、13px、14px、16px、18px、20px、24px;

注：
● 双数字号行高=文字大小+8px，举例：14号字行高=14+8=22px
● 单数字号行高=文字大小+7px，举例：13号字行高=13+7=20px

字重的选择同样基于秩序、稳定、克制的原则。多数情况下，只出现 normal 以及 medium 的两种字体重量，分别对应代码中的 400 和 500。在英文字体和加大标题加粗的情况下会采用bold 的字体重量，对应代码中的 700
对照表 >>

4.字体颜色 #

文本颜色如果和背景颜色太接近，会难以阅读。考虑到无障碍设计的需求，我们参考了 WCAG（网页无障碍阅读指南）的标准，将正文文本、标题和背景色之间的对比，保
持在 7:1 以上的 AAA 级对比度

对比度检查>>