字体设计规范文档（适用于网站建设）
时间 :
2025-03-22,11:52:28
编辑 ::超级管理员
一、文档目的
本规范旨在为网站设计、前端开发、内容编辑等相关人员提供一致、清晰、专业的字体使用标准，确保网站在不同设备、语言环境下具备良好的可读性与品牌统一性。
二、基础字体设置
1. 主字体（Primary Font）
字体名称：Roboto
字体类型：无衬线字体（Sans-serif）
用途：全站正文、段落、按钮、导航等主要内容区域
2. 辅助字体（Secondary Font）
字体名称：Playfair Display
字体类型：衬线字体（Serif）
用途：首页主标题、品牌口号、引用语、强调文本
3. 备用字体栈（Fallback）
font-family: 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
三、字号与层级规范
| 层级 | 标签 | 字号(px) | 字重 | 行高 | 用途 |
|---|---|---|---|---|---|
| H1 | h1 | 32px | 700 | 1.3 | 页面主标题 |
| H2 | h2 | 28px | 600 | 1.4 | 模块标题 |
| H3 | h3 | 22px | 600 | 1.4 | 子模块/小标题 |
| 正文 | p | 16px | 400 | 1.6 | 正文段落 |
| 辅助说明 | span.small | 14px | 400 | 1.5 | 二级说明、小字说明 |
| 按钮文字 | button | 16px | 500 | 1.5 | CTA、操作按钮 |
四、字体颜色规范
| 类别 | 颜色代码 | 用途 |
| 主文本色 | #333333 | 正文、导航栏等主要文字 |
| 标题色 | #111111 | 各层级标题、品牌口号 |
| 辅助色 | #666666 | 说明、提示、脚注等内容 |
| 链接色 | #1A73E8 | 可点击的链接文本 |
| 链接悬停色 | #0049B7 | 鼠标悬停交互反馈 |
五、响应式字体规则
为适配不同屏幕设备，建议使用 CSS 的 clamp() 函数设置字体大小。
示例：
h1 {
font-size: clamp(24px, 5vw, 32px);
}
💡 说明：此语法表示字体大小在 24px 到 32px 之间，根据视口宽度自动缩放。
六、字体使用规范
全站最多使用两种字体，避免风格混乱。
字重使用
400（常规）、500（中等）、700（加粗），不建议频繁使用900。禁止使用全部大写（ALL CAPS）作为段落正文，除非用于品牌标志。
所有图像中的文字内容，应与网页所使用字体一致。
使用
font-display: swap;以防止文字闪白。
七、Web 字体加载建议
推荐使用 Google Fonts 提供的压缩字体链接；如有性能要求，可下载字体文件进行本地托管。
字体格式建议支持：
woff2优先，其次为woff
示例代码：
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
八、多语言适配建议
| 语言 | 推荐字体 | 用途说明 |
| 中文 | 思源黑体 / 微软雅黑 | 保证跨平台兼容性与视觉一致性 |
| 日文 | Noto Sans JP | 与Roboto风格相似，适合日语内容 |
| 阿拉伯语 | Cairo / Noto Kufi Arabic | 保持与主视觉统一 |
| 韩文 | Noto Sans KR | 与Roboto兼容良好 |
九、异常处理与兼容性测试
使用字体加载监控工具（如FontFaceObserver）提升字体加载控制
所有字体应在主流浏览器（Chrome, Safari, Firefox, Edge）上测试显示兼容性
对于不支持Web字体的设备，应降级为系统字体栈
十、附录：设计工具内置字体对应建议
| 设计工具 | 字体名称 | 与开发字体一致性 |
| Figma | Roboto | ✅ 开发一致 |
| Adobe XD | Roboto / Lato | ✅ 推荐使用 |
| Sketch | Helvetica Neue | ✅ 可兼容 fallback 栈 |
本规范文件可用于交付前的前端走查、UI审核、品牌标准落地检查。
热门新闻