字体

字体是文字信息的载体，通过场景约束来统一字号的使用，在桌面&移动端建立相应的对应关系和一致性。我们建议从下面五个方面出发：

字体
字号
行高
字重
段落间距

字体

为了保证设计稿的一致性，我们推荐使用 Pingfang SC-Regular、Pingfang SC-Semibold 字体进行设计。

在开发实现时，推荐全局定义字体族名称或/及类族名称的一个优先表。如果浏览器不支持第一个字体，则会尝试优先表中的下一个。不同主流的操作系统及浏览器的默认字体不尽相同。从西文到中文，分别对个平台做一个基础的降级，这是针对系统字体规范 font-family 的基本思路。

less

@font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
  'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
  'Noto Color Emoji';

在中后台系统中，数字经常需要进行纵向对比展示，我们单独将数字的字体 font-variant-numeric 设置为 tabular-nums，使其为等宽字体。

字号

考虑到通用性和包容性，在字号的选择上，我们将主字号定义为14px，并提供了不同层级的字号以适配不同信息层级的展示需求。

最小可识别文字尺寸：桌面端：12px / 移动端：10px
字体层级：区分文本主副层级，字号差距需保持2-4px

行高

关于文字的行高 line-height，在国际无障碍网页使用标准中给出了明确的指引 line-height=font size*1.5

在验证过程中发现，固定 1.5 倍的行高比例，在当字号越大的时候，行高就会越大，在大号文字的展示上信息的连贯明显得出现割裂，尤其在多种字号及元素混排的场景中。

为了让文字之间有呼吸的空间，我们通过逻辑得到这样一个公式：行高 = 字号 + n，8 作为变量时， 14px & 16px 这 2 个常用字号行高正好同时满足与 1.5 倍比例，因此比较推荐的计算公式为 line-height = font-size + 8。

字重

字重是重要排版的变量，可以增强层次结构和重要内容区分。

面对复杂的中后台场景，在 Windows 系统下 font-weight 如果使用小于 600 默认显示为常规体，而在macOS 系统中可以使用400、500、600区分，综合考虑复杂场景显示效果，推荐在设计时只使用「400、600」两种字重配置效果。

font-weight: 400 和 font-weight: 600。字重 400 等于 Windows 和 macOS 系统下的 Regular 显示效果，字重 600 等于 Windows 系统下的 Bold 显示效果和 macOS 系统下的 Semibold 显示效果。

段落间距

段落文本中文字的可读性，由字号、行高和段间距的变量决定。在文字较多的内容中，段落与段落之间需要有一定的间距以保证最好的显示效果。根据 WCAG 中的 AAA 标准，段落间距至少为字体大小的 1.5 倍。正文 14px 字号对应段间距为 22px。

字体 ​

字体 ​

字号 ​

行高 ​

字重 ​

段落间距 ​

字体

字体

字号

行高

字重

段落间距