# 门户字体设计规范

| 属性 | 内容 |
| --- | --- |
| 文档版本 | v1.0 |
| 创建日期 | 2026-05-20 |
| 状态 | 已整理（含现状审计与统一建议） |
| 适用 | txw-mhzc-web 门户五页 + TDesign 组件区 |

---

## 一、设计原则

1. **中文优先**：界面正文与标题以苹方/雅黑为主，保证政务、企业类页面的可读性与稳重感。
2. **系统字体**：不内嵌商业字体文件，依赖用户操作系统已安装字体，降低授权与包体积风险。
3. **Token 驱动**：字号、行高、字重通过 CSS 变量维护，页面禁止随意写死 `font-family`（展示字除外）。
4. **组件一致**：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 写法：**

```css
font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
```

**工程内 TDesign Token（已存在）：**

```css
--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 等宽字体（代码）

```css
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 统一改造建议（可选实施）

1. 修改 `tailwindcss.css` 的 `body` 为 `font-family: var(--page-font-family);`
2. 新建 `styles/font-tokens.less` 并在 `main.js` 引入
3. 分批删除各 `.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 字体文件。