175 lines
5.6 KiB
Markdown
175 lines
5.6 KiB
Markdown
# 门户字体设计规范
|
||
|
||
| 属性 | 内容 |
|
||
| --- | --- |
|
||
| 文档版本 | 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 字体文件。
|