---
title: 字体
slug: 字体
category: 基础
figma_node_id: 1:3
figma_page_name: 基础元素 / 字体（聚合自设计系统简介与基础元素页）
aliases: [Typography, 字号, 字重, 行高, font, typeface, type scale, 文字规范, 中文字体, PingFang]
last_extracted: 2026-05-19
status: ok
---

# 字体

> 如流设计系统 2.0 的字体规范，覆盖字体栈、字号阶梯、字重映射、行高与使用场景。中文主栈采用 **PingFang SC**，英文 / 数字辅栈采用 **Inter**。字号阶梯主要为 12 / 13 / 14 / 16 / 20 / 24 / 30 / 48 / 66 / 90，行高与字号大体保持 1.0–1.83 倍区间。

## 字体栈

| 场景 | 主字族 | 辅字族 | 备注 |
|---|---|---|---|
| 中文（简体） | PingFang SC | PingFang HK / TC | 桌面端、移动端共用 |
| 英文 / 数字 | Inter | PingFang SC | 数字、英文标签使用 Inter 视觉更紧致 |
| 编辑器 / 等宽 | 系统等宽 | — | 代码段、token 名展示 |

> `fontFamily` 在 globalVars 中观察到的值：`PingFang SC` / `PingFang HK` / `PingFang TC` / `Inter`。

## 字重映射

| 字重名 | fontWeight | 中文别名 | 典型用途 |
|---|---|---|---|
| Light | 300 | 细体 | 装饰性正文 / 副标题 |
| Regular | 400 | 常规 | 正文、说明文字、绝大部分文案 |
| Medium | 500 | 中粗 | 章节小标题、强调正文 |
| Semibold | 600 | 半粗 | 主标题、卡片标题 |
| Bold | 700 | 粗体 | 编号标签、品牌字 |

## 字号阶梯（typography scale）

| token 名 | px | 字重 | 行高 | 使用场景 |
|---|---|---|---|---|
| `type-display-xxl` | 90 | Semibold 600 | 100 | 超大封面主标题（设计系统封面） |
| `type-display-xl` | 66 | Semibold 600 | 66 | 大标题（页面级首屏标题） |
| `type-display-l` | 48 | Semibold 600 | 56 | 章节大标题（如"05 产品接入案例"） |
| `type-title-2` | 30 | Semibold 600 | 30 | 品牌字 / 设计系统简介品牌名 |
| `type-title-3` | 30 | Regular 400 | — | 装饰性大数字编号（Inter） |
| `type-title-4` | 24 | Semibold 600 | 24 | 章节小标题（"01. 品牌色"等） |
| `type-title-5` | 24 | Regular 400 | 44 | 正文（设计系统简介页正文 PingFang SC 24/44） |
| `type-section` | 24 | Bold 700 | 24 | 编号标签（Inter Bold 24/24） |
| `type-body-l` | 20 | Medium 500 | 20 | 子标题（"·loading 类"等列表小节标题） |
| `type-body` | 16 | Regular 400 | — | 通用正文（基础元素卡片正文 PingFang SC 16） |
| `type-body-s` | 14 | Regular 400 | 22 | 卡片内说明 / 表格正文 |
| `type-caption` | 13 | Regular 400 | — | 表单辅助文字 / 字段说明 |
| `type-caption-s` | 12 | Regular 400 | — | 最小辅助文字 / 标签 / 时间戳 |
| `type-tag` | 10 | Semibold 600 | 20 | 小标签 / 角标（"Component properties"紫色标签） |

> 来自 globalVars 的部分定义示例：
> - `style_RWJOG9`: PingFang SC Regular 400 / 16px / 两端对齐 — 基础元素页正文
> - `style_A14MP6`: Inter Regular 400 / 30px / 左对齐 — 大编号 / 编号标签
> - `style_YTWP25`: PingFang SC Medium 500 / 24px / 24px lineHeight / 左对齐 — 章节标题
> - `style_A7N1VN`: PingFang SC Medium 500 / 20px / 20px lineHeight / 左对齐 — 子小节
> - `style_3F4JSA`: PingFang SC Semibold 600 / 42px / 42px lineHeight — BEP 大模型图标卡片大标题
> - `style_OB1QMY`: PingFang SC Regular 400 / 18px / 18px lineHeight / 字间距 5.56% — 图标说明文字

## 行高 / 字间距

- 中文标题行高 = 字号 × 1.0~1.1（如 24/24、30/30、48/56、66/66、90/100）
- 中文正文行高 = 字号 × 1.4~1.8（如 24/44、14/25.67）
- 字间距：装饰性大数字 11.33%；正文 5.56%；说明文字 20%；标签 6.67%
- 对齐：标题左对齐；正文段落两端对齐（JUSTIFIED）；图标标签居中（CENTER）

## 文本颜色配合

正文文字默认使用 `color-text-1 (#1D2129)`；说明 / 占位走 `color-text-3 (#86909C)`；弱化走 `color-text-4 (#C9CDD4)`。深色背景上的浅色文字以 `#FFFFFF` 为主，辅以透明度调节（见 [色彩](色彩.md) 中"透明度阶梯"）。

## 关联

- 文字颜色 token 见 [色彩](色彩.md) "文字色" 节
- 行高 / 间距与组件之间的关系见 [基础元素](基础元素.md)
- 字体落地到具体组件的实例（如按钮文字、Toast 文案）见组件目录下各 MD
