Typography 排版
DHdesign Mobile 字体体系用于移动端界面。常规文本使用系统无衬线字体，数字、金额、时间等场景使用强化数字字体。
ts
// Typography 基于移动端主题变量，无需引入组件。字体
| 类型 | 字体家族 |
|---|---|
| 中文字体 | PingFang SC / Noto Sans CJK SC / Source Han Sans SC / Hiragino Sans GB / Segoe UI / Microsoft YaHei / OPPO Sans / sans-serif |
| 数字字体 | OPPO Sans / Roboto / Helvetica Neue / Helvetica / Arial / sans-serif |
字重
| 名称 | 字重 | 使用场景 |
|---|---|---|
| Regular | 400 | 正文、普通标题、未选中状态 |
| Medium | 500 | 重点正文、标题、选中状态 |
| SemiBold | 600 | 弹窗标题、日历标题等少量强强调场景 |
移动端字阶
| 应用场景 | 字号 | 行高 | 字重 |
|---|---|---|---|
| 大标题 | 22px | 30px | 500 |
| 重点标题 | 20px | 28px | 500 |
| 标题 | 20px | 28px | 400 |
| 重点强调 | 18px | 26px | 500 |
| 强调内容 | 18px | 26px | 400 |
| 重点正文、一级 tab 选中 | 16px | 24px | 500 |
| 正文、一级 tab 未选中 | 16px | 24px | 400 |
| 二级重点正文、二级 tab 选中 | 14px | 22px | 500 |
| 二级正文、二级 tab 未选中 | 14px | 22px | 400 |
| 三级重点文字、三级 tab 选中 | 13px | 21px | 500 |
| 三级文字、三级 tab 未选中 | 13px | 21px | 400 |
| 辅助重点文字 | 12px | 20px | 500 |
| 辅助文字 | 12px | 20px | 400 |
| 底 bar 文字选中 | 11px | 19px | 500 |
| 底 bar 文字未选中 | 11px | 19px | 400 |
| 小标签文字 | 10px | 18px | 400 |
组件变量映射
移动端组件会继承 DHdesign Mobile 的字体变量。常用映射如下：
| 移动端规范 | 组件变量 |
|---|---|
| 基础字体 | --van-base-font |
| 加粗、选中 | --van-font-bold |
| 角标字体 | --van-badge-font |
| 10px / 18px | --van-font-size-xs / --van-line-height-xs |
| 12px / 20px | --van-font-size-sm / --van-line-height-sm |
| 14px / 22px | --van-font-size-md / --van-line-height-md |
| 16px / 24px | --van-font-size-lg / --van-line-height-lg |
18px、20px、22px 这类更高层级的标题和强调文本，优先使用 DHdesign Mobile 字体变量：
| 字阶 | 变量 |
|---|---|
| 22px / 30px | --dh-mobile-font-size-xxl / --dh-mobile-line-height-xxl |
| 20px / 28px | --dh-mobile-font-size-xl / --dh-mobile-line-height-xl |
| 18px / 26px | --dh-mobile-font-size-lg / --dh-mobile-line-height-lg |
| 16px / 24px | --dh-mobile-font-size-md / --dh-mobile-line-height-md |
| 14px / 22px | --dh-mobile-font-size-base / --dh-mobile-line-height-base |
| 13px / 21px | --dh-mobile-font-size-sm / --dh-mobile-line-height-sm |
| 12px / 20px | --dh-mobile-font-size-xs / --dh-mobile-line-height-xs |
| 11px / 19px | --dh-mobile-font-size-xxs / --dh-mobile-line-height-xxs |
| 10px / 18px | --dh-mobile-font-size-mini / --dh-mobile-line-height-mini |
字体颜色
| 类型 | 色值 | 使用场景 |
|---|---|---|
| 主要文字 | rgba(0, 0, 0, 0.9) | 正文内容 |
| 次要文字 | rgba(0, 0, 0, 0.68) | 辅助说明 |
| 辅助文字 | rgba(0, 0, 0, 0.48) | 提示信息 |
| 禁用文字 | rgba(0, 0, 0, 0.2) | 禁用状态 |
使用说明
- 页面文本优先按移动端字阶选用，不临时新增字号。
- 组件内部优先通过主题变量继承，不单独覆盖字体家族。
- 数字、金额、时间、统计值优先使用数字字体变量。