字体与字号
字体
| 用途 | 字体 | 类名 |
|---|---|---|
| 界面与正文（中英文） | Noto Sans SC Variable → PingFang SC → Microsoft YaHei | font-sans（默认） |
| 数字、代码、编号、眉题 | Geist Mono Variable | font-mono |
examples/foundations/type-weights.html
加载字体
tokens.css 只声明字体名，字体文件由项目自己加载。v2 使用自托管的 Fontsource 包，按 unicode-range 分片，浏览器只下载页面用到的字：
bash
pnpm add @fontsource-variable/noto-sans-sc @fontsource-variable/geist-monots
// main.ts
import '@fontsource-variable/noto-sans-sc'
import '@fontsource-variable/geist-mono'不加载时自动回退到系统字体（macOS / iOS 为苹方，Windows 为微软雅黑），版式不会错乱。
字号阶梯
examples/foundations/type-scale.html
| 层级 | 类名 | 用在 |
|---|---|---|
| Display | text-4xl sm:text-5xl lg:text-6xl leading-[1.15] font-semibold tracking-tight | 首屏标题，每页最多一个 |
| H2 | text-3xl sm:text-4xl leading-tight font-semibold tracking-tight | 区块标题 |
| H3 | text-2xl font-semibold | 独立页面标题、结果页 |
| H4 | text-lg font-semibold | 卡片标题、对话框标题 |
| Lead | text-base sm:text-lg leading-relaxed text-muted-foreground | 首屏与区块的说明 |
| Body | text-sm leading-relaxed | 界面中大多数文字 |
| Label | text-sm font-medium | 表单标签、按钮 |
| Caption | text-xs leading-relaxed text-muted-foreground | 提示、辅助说明、徽标 |
| Eyebrow | font-mono text-xs uppercase tracking-[0.2em] | 区块眉题 |
排版规则
- 字重只用 400 / 500 / 600。不使用 700 及以上：中文粗体在小字号下糊成一团
- 最小字号 12px（
text-xs）。不使用text-[11px]等更小的字号 - 标题加
text-balance，让多行标题的各行长度接近；段落加text-pretty，避免最后一行只剩一个字 - 段落最大宽度约 36em（
max-w-xl），过长的行难以阅读 - 金额、编号、电话等数字使用
font-mono；表格中的数字再加tabular-nums保证等宽对齐 - 中英文混排不手动加空格，由字体自然处理；英文专有名词保持原样大小写（Alipay+、WeChat Pay）
与 v2 的差异
| v2 现状 | 规范 |
|---|---|
徽标、提示中使用 text-[11px] | 最小 text-xs |
眉题有 tracking-wide 与 tracking-[0.2em] 两种 | 区块眉题统一 tracking-[0.2em]；卡片内英文副标题 tracking-wide |