# POSX 2026 设计系统 · 字体规范 Typography

> 版本 v1.0.0 · 2026-08-02 · 配套字体文件本地托管于 `04-fonts/`（OFL 开源许可，可自由商用与自托管）

---

## 1. 字体家族

| 角色 | 家族 | 变量轴 | 用途 |
|---|---|---|---|
| Display / 标题 | **Space Grotesk** | wght 300–700 | H1–H4、数字大屏、营销标题的西文与数字 |
| 正文（西文） | **Inter** | opsz 14–32 · wght 100–900 · italic | 界面正文、表单、说明文字 |
| 正文（中文） | **Noto Sans SC** | wght 100–900 | 全部中文文本（标题与正文统一兜底） |
| 等宽 / 数据 | **JetBrains Mono** | wght 100–800 · italic | 代码、金额、哈希、表格数字对齐 |

### 多语言 CJK 家族（i18n · 按 html[lang] 切换，见 06-website/I18N.md）

| 语言 | 标题层 | 正文层 | 字重 |
|---|---|---|---|
| zh-CN | Noto Sans SC | Noto Sans SC | variable 100–900 |
| zh-HK | GenYoGothic TW（源樣黑體2） | GenYoGothic TW | 400 / 500 / 700 |
| ja | IBM Plex Sans JP | IBM Plex Sans JP | 400 / 500 / 700 |
| ko | IBM Plex Sans KR | Pretendard Variable | KR 400/500/700 · Pretendard variable 45–920 |

### CSS 字体栈（与门户页/色彩页实际 CSS 一致；字体 token 并入 tokens.css 属 roadmap，见根 README）

```css
--font-head: "Space Grotesk", "Noto Sans SC", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
--font-body: "Inter", "Noto Sans SC", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
--font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, "Noto Sans SC", monospace;
```

引入方式（本地，无 CDN 依赖）：

```html
<link rel="stylesheet" href="<相对路径>/04-fonts/fonts.css">
```

---

## 2. 字阶 Type Scale（1.25 比例 · 16px 基准）

| Token | 大小 | 行高 | 字重 | 家族 | 用途 |
|---|---|---|---|---|---|
| display | 60px | 1.1 | 700 | head | 营销 Hero 大标题 |
| h1 | 48px | 1.15 | 700 | head | 页面主标题 |
| h2 | 38px | 1.2 | 600 | head | 区块标题 |
| h3 | 30px | 1.25 | 600 | head | 卡片组标题 |
| h4 | 24px | 1.3 | 600 | head | 小节标题 |
| h5 | 20px | 1.4 | 600 | head | 列表/表头强调 |
| body-lg | 18px | 1.65 | 400 | body | 导语、突出正文 |
| body | 16px | 1.65 | 400 | body | 默认正文 |
| body-sm | 14px | 1.6 | 400 | body | 辅助说明、表格正文 |
| caption | 12px | 1.5 | 400 | body | 注释、时间戳、法务小字 |
| mono / 金额 | 随上下文 | 1.5 | 500 | mono | 金额、哈希、代码 |

> 中文占主导的段落行高上调至 **1.75**（中文字符视觉密度更高）；纯中文标题字重用 500/700（Noto Sans SC 无 600 视觉差异明显时靠变量轴取 580–620）。

## 3. 使用规则

1. **金额与行情数字一律 JetBrains Mono**（等宽保证表格对齐），配合 `font-variant-numeric: tabular-nums` 兜底。
2. 字间距：Space Grotesk 大标题（≥38px）加 `letter-spacing: -0.02em`；全大写小标签加 `+0.06em`。
3. 最小可用字号：正文 14px；纯装饰性文字不小于 12px；法务文本 12px 且对比度 ≥4.5。
4. 中西文混排：不手动插空格，交给字体渲染；数字在中文语境中优先 Inter/JetBrains Mono 而非 Noto。
5. 字重上限：正文不超过 500；700 只用于标题与关键数据。
6. 不引入本规范以外的字体家族；营销特殊需求须走设计系统变更流程（见根目录 README）。

## 4. 文件与许可

- `04-fonts/fonts.css` —— 全部 `@font-face` 声明（含 unicode-range 切片，中文按需加载）。
- `04-fonts/<family>/` —— woff2 变量字体文件 + 各家族 `OFL.txt` 许可证。
- 四个家族均为 SIL Open Font License 1.1：允许商用、自托管、嵌入；不允许单独出售字体文件本身。