Typography 排版
DHdesign PC 字体体系用于桌面端界面。常规界面文本优先使用系统无衬线字体，数据、指标、时间、金额等数字场景使用强化数字字体。
ts
// Typography 基于 CSS 设计变量（design tokens），无需引入任何组件。字体
常规中文文本优先使用 PingFang SC / Noto Sans CJK SC，并回退到各系统默认字体；数字文本优先使用 OPPO Sans，再回退到 Roboto / Helvetica / Arial。
字号
字重
字重（font-weight）用于设置文字的粗细程度。
行高
段落示例
API
PC 字阶
| 应用场景 | 字号 | 行高 | 字重 |
|---|---|---|---|
| 运营标题-大 | 56px | 64px | 400 / 500 |
| 运营标题-中 | 48px | 56px | 400 / 500 |
| 运营标题-小 | 36px | 42px | 400 / 500 |
| 标题-大 | 24px | 30px | 400 / 500 |
| 标题-中 | 20px | 28px | 400 / 500 |
| 标题、正文-常规-小 | 16px | 24px | 400 / 500 |
| 正文-常规-大 | 14px | 22px | 400 / 500 |
| 辅助文案、标签文字 | 12px | 20px | 400 / 500 |
Element Plus 字号映射
| 名称 | 默认值 |
|---|---|
--el-font-size-extra-large | 24px |
--el-font-size-large | 20px |
--el-font-size-medium | 16px |
--el-font-size-base | 14px |
--el-font-size-small | 12px |
--el-font-size-extra-small | 12px |
字重 CSS 变量
| 名称 | 默认值 |
|---|---|
--el-font-weight-primary | 500 |
--dh-font-weight-regular | 400 |
--dh-font-weight-medium | 500 |
--dh-font-weight-semibold | 600 |
行高 CSS 变量
| 名称 | 默认值 |
|---|---|
--el-font-line-height-primary | 24px |
--el-font-line-height-secondary | 20px |
--dh-line-height-display-large | 64px |
--dh-line-height-display-medium | 56px |
--dh-line-height-display-small | 42px |
--dh-line-height-title-large | 30px |
--dh-line-height-title-medium | 28px |
--dh-line-height-title-small | 24px |
--dh-line-height-body-large | 22px |
--dh-line-height-auxiliary | 20px |
字体颜色
| 类型 | 色值 | 使用场景 |
|---|---|---|
| 主要文字 | rgba(0, 0, 0, 0.9) | 正文内容 |
| 次要文字 | rgba(0, 0, 0, 0.68) | 辅助说明 |
| 辅助文字 | rgba(0, 0, 0, 0.48) | 提示信息 |
| 禁用文字 | rgba(0, 0, 0, 0.2) | 禁用状态 |
更多细节见 Element Plus Typography 文档。