5.6 KiB
5.6 KiB
门户字体设计规范
| 属性 | 内容 |
|---|---|
| 文档版本 | v1.0 |
| 创建日期 | 2026-05-20 |
| 状态 | 已整理（含现状审计与统一建议） |
| 适用 | txw-mhzc-web 门户五页 + TDesign 组件区 |
一、设计原则
- 中文优先：界面正文与标题以苹方/雅黑为主，保证政务、企业类页面的可读性与稳重感。
- 系统字体：不内嵌商业字体文件，依赖用户操作系统已安装字体，降低授权与包体积风险。
- Token 驱动：字号、行高、字重通过 CSS 变量维护，页面禁止随意写死
font-family（展示字除外）。 - 组件一致：TDesign 组件使用
--td-font-*；门户自定义区块使用--page-font-*（本包提供）。
二、字体族（Font Family）
2.1 主字体栈（全站默认）
| 优先级 | 字体 | 说明 |
|---|---|---|
| 1 | PingFang SC（苹方-简） | macOS / iOS 默认中文 UI 字体 |
| 2 | Microsoft YaHei（微软雅黑） | Windows 常见中文 UI 字体 |
| 3 | Arial | 西文与兜底 |
| 4 | sans-serif | 系统无衬线兜底 |
CSS 写法：
font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
工程内 TDesign Token（已存在）：
--td-font-family: pingfang sc, microsoft yahei, arial regular;
--td-font-family-medium: pingfang sc, microsoft yahei, arial medium;
2.2 中等字重栈（强调、标签）
与主栈相同，字重由 font-weight: 500 / 600 控制，不单独换字体文件。
2.3 展示/营销标题（仅首页等特殊区块）
| 场景 | 字体栈 | 备注 |
|---|---|---|
| 大 Banner 主标题 | FZZhengHeiS-B-GB, PingFang SC | 需本机安装方正正黑；无则回退苹方 |
| 部分强调标题 | SimHei, 黑体 | 仅 home2 等局部使用，不宜扩散 |
| 数字/英文强调 | Inter, PingFang SC | 首页部分卡片；建议逐步改为苹方栈 |
2.4 等宽字体（代码）
font-family: 'Fira Code', 'SFMono-Regular', Consolas, monospace;
2.5 图标字体
iconfont（项目 icon 组件专用，勿用于正文）。
三、字号阶梯（Type Scale）
3.1 TDesign 标准阶梯（组件、表单、后台）
来源：src/pages/index/assets/css/theme.css
| Token | 字号 | 典型用途 |
|---|---|---|
--td-font-size-link-small |
12px | 小链接 |
--td-font-size-body-small |
12px | 辅助说明 |
--td-font-size-body-medium |
14px | 正文默认 |
--td-font-size-body-large |
16px | 强调正文 |
--td-font-size-title-small |
14px | 小标题 |
--td-font-size-title-medium |
16px | 卡片标题 |
--td-font-size-title-large |
20px | 区块标题 |
--td-font-size-headline-small |
24px | 页面副标题 |
--td-font-size-headline-medium |
28px | 页面主标题 |
--td-font-size-headline-large |
36px | 大标题 |
--td-font-size-display-medium |
48px | 展示级 |
--td-font-size-display-large |
64px | 首屏超大字 |
行高规则： line-height = font-size + 8px（--td-line-height-common: 8px）
组合字体简写： 使用 --td-font-body-medium、--td-font-title-large 等（已含字号/行高/字体族）。
3.2 门户营销页常用字号（home2 / 导航）
| 字号 | 字重 | 场景 |
|---|---|---|
| 10px | 400 | 导航角标等（慎用，注意可访问性） |
| 12px | 400 | 辅助信息 |
| 14px | 400 | 次要文案、导航副项 |
| 16px | 400/500 | 导航、正文、按钮 |
| 18px | 500/700 | 副标题、强调句 |
| 22px | 600 | 区块小标题 |
| 24px | 500/700 | 模块标题 |
| 28px | 700 | 强调标题 |
| 32px | 600/700 | 屏级大标题 |
3.3 根字号（rem 基准）
app.vue 中 html { font-size: 20px; } — 若使用 rem，需以此为准换算。
四、字重（Font Weight）
| 值 | 名称 | 用途 |
|---|---|---|
| 400 | Regular | 正文、说明 |
| 500 | Medium | 导航、次要标题 |
| 600 | Semibold | 卡片标题、强调 |
| 700 | Bold | 主标题、数据强调 |
五、颜色（与字体配套）
TDesign 文本色（theme.css）：
| Token | 值 | 用途 |
|---|---|---|
--td-text-color-primary |
rgba(0,0,0,0.9) | 主文案 |
--td-text-color-secondary |
rgba(0,0,0,0.6) | 次要文案 |
--td-text-color-placeholder |
rgba(0,0,0,0.4) | 占位 |
--td-text-color-disabled |
rgba(0,0,0,0.26) | 禁用 |
门户链接色（tailwind 片段）：#9ca3af（app.vue 全局 a 标签，可按设计调整）。
六、使用规范
6.1 应该
- 正文、表单、表格：使用
--td-font-body-medium或--page-font-body-medium - 门户导航：
--page-font-nav（16px / 500） - 屏级标题：
--page-font-screen-title（32px / 600） - 新页面只引用 Token，不写
font-family: PingFang SC重复声明
6.2 不应该
- 在
body使用 Inter 作为中文站默认字体 - 同一页面混用 3 种以上 font-family
- 小于 12px 的正文（除角标等特殊场景）
6.3 统一改造建议（可选实施）
- 修改
tailwindcss.css的body为font-family: var(--page-font-family); - 新建
styles/font-tokens.less并在main.js引入 - 分批删除各
.vue内重复的font-family: PingFang SC
七、与版心规范的关系
版心、边距见 page-layout-margin-refactor.md；字体与版心独立，但区块大标题需同时遵守：
- 字号：见
--page-font-section-title - 左对齐：与
--page-section-title-padding-left配合
八、交付清单
本 zip 包含：规范文档、CSS/Less Token、theme 摘录、现状审计、HTML 预览页。不包含 .ttf/.woff 字体文件。