文字样式
:::tip 核心原则 字体系统基于多语言适配设计，使用 4 种字体家族覆盖拉丁、简中、繁中、日文场景，所有字号通过 Type Scale Token 统一管理。 :::
Font Families（字体家族）
系统支持 4 种字体，根据内容语言自动 fallback：
| 字体 | 语言 | 用途 |
|---|---|---|
| Inter | 拉丁字母（英文） | UI 主字体，数字、英文标签 |
| PingFang SC | 简体中文 | 中国大陆用户界面 |
| PingFang TC | 繁体中文 | 港台用户界面 |
| Noto Sans JP | 日文 | 日本用户界面 |
CSS font-family 声明
font-family: 'Inter', 'PingFang SC', 'PingFang TC', 'Noto Sans JP', sans-serif;
不同语言场景下优先使用对应字体。Inter 作为数字和英文的首选字体，确保数据展示的精确对齐。
Font Weights（字重）
| 字重 | 值 | 用途 |
|---|---|---|
| Regular | 400 | 正文、描述、表单 |
| Medium | 500 | 强调文字、导航标签（非 Inter 字体） |
| Semibold | 600 | 标题、按钮、关键操作（Inter 的 Emphasized 使用 Semibold） |
注意：DS 4.0 已移除 Light (300)。Emphasized 语义字重在 Inter（Latin）中映射为 Semibold，其他字体映射为 Medium。不同字体家族对字重的支持程度不同，请参考下方 Weight Availability Matrix。
UI Type Scale（字体阶梯）
标题层级
| 层级 | 字号 | 行高 | 字重 | 用途 |
|---|---|---|---|---|
| Display | 32px | 44px | Semibold | 页面级大标题 |
| H1 | 24px | 32px | Semibold | 页面标题 |
| H2 | 20px | 28px | Semibold | 模块/区域标题 |
| H3 | 18px | 24px | Semibold | 子模块标题 |
正文与辅助
| 层级 | 字号 | 行高 | 字重 | 用途 |
|---|---|---|---|---|
| Body | 14px | 20px | Regular | 段落正文、列表、表单输入 |
| Footnote | 13px | 18px | Regular | 辅助说明、免责声明 |
Details Page（详情页参考）
详情页是信息密度最高的场景，其字体使用规则如下：
| 层级 | 字号 | 行高 | 上间距 | 字重 |
|---|---|---|---|---|
| H1 | 28px | 36px | 32px（首块为 0） | Semibold |
| H2 | 24px | 32px | 24px | Semibold |
| H3 | 20px | 28px | 20px | Semibold |
| H4 | 18px | 24px | 16px | Semibold |
| Paragraph | 16px | 24px | —（下间距 12px） | Regular |
| Paragraph Bold | 16px | 24px | 同上 | Semibold |
| Paragraph Italic / Italic Bold | 16px | 24px | 同上 | Regular / Semibold |
块间视觉距离 = 上一块 padding-bottom（H1/H2 为 12px、H3/H4 为 8px、Paragraph 为 12px）+ 本块 margin-top，与 block-editor 实现一致。
Weight Availability Matrix（字重可用性矩阵）
不同字体在各字重下的可用性：
| 字体 | Regular (400) | Medium (500) | Semibold (600) |
|---|---|---|---|
| Inter | ✅ | ✅ | ✅ |
| PingFang SC | ✅ | ✅ | ✅ |
| PingFang TC | ✅ | ✅ | ✅ |
| Noto Sans JP | ✅ | ✅ | ✅ |
Accessibility（无障碍）
最小字号
所有 UI 文字不得小于 13px（Footnote 层级），确保在各设备上的可读性。
推荐行高比
- 正文：≥ 1.5 倍字号
- 标题：≥ 1.25 倍字号
最小字重
DS 4.0 已移除 Light (300)，Regular (400) 为最轻允许字重。
使用方式
Tailwind Class
// 标题
<h1 className="text-[24px] leading-[32px] font-semibold">页面标题</h1>
// 正文
<p className="text-[14px] leading-[20px] font-normal">正文内容</p>
// 辅助文字
<span className="text-[13px] leading-[18px] text-[var(--Labels-Secondary)]">辅助说明</span>
组件中的文字规范
// Button 使用 Body 层级 + Medium
<Button>操作按钮</Button> // 14px / Medium
// Input 使用 Body 层级 + Regular
<Input placeholder="请输入" /> // 14px / Regular