文字，是页面信息传达最重要的基本载体之一，也是界面设计中最基本的构成之一。建立有序、一致、灵活的字体系统有利于提高内容的可阅读性，提高页面构成的层次与秩序感，为用户创造良好的阅读体验。

字体家族

网页中常用的字体为无衬线字体，具备清晰、现代的特点，更利于阅读与浏览，同时为了保证字体在不同平台及浏览器内始终保持良好的易读性和可读性，优选平台默认的界面字体。
image.png
特殊场景下，如大屏可视化，对数字、英文有美观上的需求，需要用到特殊字体，我们采用「Montserrat」这款免费字体：
image.png

回退机制

通用场景

  1. font-family: -apple-system , BlinkMacSystemFont , "Segoe UI" , Roboto , "Helvetica Neue", "PingFang SC", "Noto Sans" , "Noto Sans CJK SC" , "Microsoft YaHei" , "微软雅黑" , sans-serif;

代码片段场景

使用 Mono（等宽）字体来显示代码片段信息。

font-family: source-code-pro, "SF Mono", "Segoe UI Mono", "Roboto Mono", "Ubuntu Mono", Menlo, Courier, monospace;

字阶与行高

字阶是指一系列有规律的不同尺寸的字体。行高可以理解为一个包裹在字体外面的无形的盒子。
image.png
image.png

使用时需要注意：

  1. 默认字号为 14px；
  2. 浏览器最小可识别的文字大小为 12px；
  3. 通过字体大小区分字体层级，字号需要差距至少 2px；
  4. 产品中不要使用超过 5 种字体层级，建议控制在 3 种左右，需要引导用户关注的信息，除了加大字号外，还可通过增加字重的方式突出，亦可使用具备场景化的信息提示组件；

字重

常规体常用于正文阅读场景，加粗体常用于标题及突出特定文字内容场景，请勿在正文场景大量使用加粗及细体。Regular 以及 Medium 两种字体重量分别对应 CSS 代码 Font-Weight 中的 400 和 500，英文字体加粗的情况下会采用 Semibold 的字体重量，对应代码中的 600。特殊场景下需要采用 Light 的字体，对应代码中的 300。
image.png

字体样式

我们根据实际使用场景，结合字阶、行高定义了以下字体样式：
image.png

对齐

共三种类型的对齐方式：左对齐、右对齐、居中对齐，勿用两端对齐（Justify）：
image.png

  • 左对齐：系统最常用也是默认的对齐方式，符合人从左到右的阅读习惯；
  • 右对齐：卡片内排列对称的信息时可用，如字段标题在左，内容在右，给文本设置与右边距对齐，但不建议用于长文案；
  • 居中对齐：不建议用于长文案；

可交互文本

指具备复制、编辑等额外交互功能的文本，提供三种样式：
image.png

使用原则

  • 图标的含义符合用户认知，不产生歧义
  • 图标不好表达操作的含义，或有歧义时，使用文字型的交互文本

常见交互能力及对应的使用图标

下载以及标注详见 CoDesign

image.png