公司网站定制字体使用规范指南：如何做视觉舒适度高的网站
很多企业官网在视觉上显得不够精致，问题通常不出在 Logo 或 Banner，而在于正文只有 13px、行距挤成 1.2、标题靠加粗撑场面、图片里的字用了未授权的艺术体。这些细节单看都不算大错，叠加在一起却会让页面透出廉价感，同时埋下法律隐患。
字体排印（Typography）是网页设计中最容易被低估、也最容易标准化的一环。它同时牵涉三条线：版权合规线（能不能用）、视觉舒适线（好不好读）、性能体验线（快不快）。任何一条没走通，前面的努力都会打折——字选得再美，加载 4 秒用户早就走了；排版再舒服，一张未授权的标题图可能带来数万元索赔。
下文将按照这三条线展开，提供可直接抄进设计规范的参数、可写进合同的条款以及可逐项打勾的验收清单。
一、第一条线：版权合规——先解决"能不能用"，再谈好不好看
这是企业最容易踩雷、也最不该踩雷的地方。字体是受《著作权法》保护的美术作品/计算机软件，未经商业发布授权将字体用于官网、商品详情页、海报、短视频字幕等公开场景，均构成侵权。司法实践中已有大量判例：天猫 Banner 用 38 个未授权汉字和解 8 万元；短视频字幕约 300 字判赔 3 万元；淘宝详情页用 12 个字判赔 3500 元。此外，批量发函维权已是成熟商业模式，官网恰恰是最容易被取证固化的公开场景。
1.1 三个必须纠正的误解
| 误解 | 事实 |
|---|---|
| "我电脑里有这个字体，就能用" | 系统预装 ≠ 可商用发布。典型如微软雅黑：微软委托方正设计，著作权归方正，微软仅取得预装授权，无权转授商业发布权。用它做 Banner 切图上线即属侵权 |
| "免费下载站下的，应该没事" | "免费下载""个人学习使用" ≠ 免费商用。必须看到 OFL / CC0 / 作者明确免费商用声明 |
| "我们只用在网站上，不算商用" | 企业官网属于商业性展示，是典型的商用场景；LOGO、VI、包装、商标同样需要对应授权范围覆盖 |
1.2 选型白名单（按风险从低到高）
A 级：开源免费可商用（首选，适合正文与界面）
- 思源黑体 / Noto Sans SC（SIL OFL 1.1，7 字重，简繁日韩全覆盖）
- 思源宋体 / Noto Serif SC（OFL，长文、报告、品牌手册）
- 阿里巴巴普惠体（免费商用，电商与信息密度高的后台界面很稳）
- 鸿蒙黑体 HarmonyOS Sans、OPPO Sans、MiSans（OFL，界面感强）
- 霞鹜文楷（OFL，文创、教育、长文点缀）、站酷系列部分免费字体
⚠️ OFL 也有红线：不得把修改版仍叫原名、不得单独售卖字体文件、嵌入 App/软件分发时属于"分发行为"，需保留版权声明与授权文本。建议把授权文件随字体一起归档。
B 级：付费买断/年费（用于品牌标题字、LOGO 字）正规平台明码标价，支付后务必索取电子发票 + 授权书，核对授权范围是否覆盖"网站/互联网发布"、是否限曝光量、是否含 LOGO 与商标用途。保存期限建议 ≥6 年（对应诉讼时效与举证周期）。
C 级：绝对禁止来路不明的字体包、标注"仅供学习参考"的字体、设计师本机自带但无授权的创意字、从竞品网站扒下来的 @font-face 链接。
1.3 必须写进合同/制度的四条
- 供应商交付物须附字体授权证明，未经授权使用导致索赔的，由乙方承担全部赔偿与整改费用；
- 图片/Banner/视频中的字同样要授权——这是最容易被漏掉的盲区，切图里的艺术字一样算复制传播；
- 建立企业字体白名单（正文 1–2 款 + 标题 1 款 + 等宽 1 款），清单外字体需法务/品牌审批；
- 外包稿件要求设计师在交付时标注所用字体名称与来源，纳入验收项。
二、第二条线：视觉舒适——把"好读"变成一组可测量的数字
舒适度的核心不是"选一款好看的字"，而是字号、行高、行长、字重、对比度、留白这六个参数的组合。研究显示，排版因素（行距、行长、字号）对阅读舒适度的影响权重，通常高于"黑体还是宋体"的选择。
2.1 字体家族配置（克制原则：全站不超过 2 个字族）
| 角色 | 推荐 | 字重 | 说明 |
|---|---|---|---|
| 主字体（正文/UI） | 思源黑体 / 阿里巴巴普惠体 / HarmonyOS Sans | Regular 400 + Medium 500 + Bold 700 | 中性、字腔开阔、小字号不糊；占全站 90% 以上 |
| 辅助字体（标题/品牌感） | 思源宋体 / 一款付费标题字 | Medium 500 + Bold 700 | 只用在大标题、Banner、专题页，避免全文使用 |
| 等宽（代码、订单号、数据） | JetBrains Mono /思源黑体 Mono | Regular 400 | 数字字母等宽，表格对位整齐 |
| 兜底系统字体栈 | "PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif | — | 自定义字体加载失败或禁用时的第二道防线，必须写 |
原则：一个字族撑起全站，靠字重和字号做层次，不要靠换字体。MIT 相关研究指出，过多字体混排会分散注意力并降低理解度。
2.2 字号阶梯（用 rem，别用 px 写死）
以根字号 16px 为基准（尊重用户浏览器字号设置，这是无障碍的硬要求）：
| 层级 | 桌面端 | 移动端 | 用途 |
|---|---|---|---|
| H1 / 页头大标题 | 32–40px（2–2.5rem） | 26–30px | 每页唯一 |
| H2 / 版块标题 | 24–28px | 22–24px | 栏目分区 |
| H3 / 卡片标题 | 20–22px | 18–20px | 内容分组 |
| 正文（核心） | 17–18px | 16–17px | 长文阅读不低于此档 |
| 辅助说明/图注 | 14px | 14px | 不得作为正文 |
| 极小注记 | ≥12px | ≥12px | 版权行、备案号，且对比度仍需达标 |
关键提醒：中文正文低于 14px 时，宋体在普通屏上会明显模糊；若必须用小字号，请切换回黑体。移动端正文字号最小不应低于 15px（工信部适老化规范对老年模式的要求更高）。
2.3 行高与间距（舒适度收益最大的一项）
| 场景 | 行高倍数 | 补充 |
|---|---|---|
| 按钮/单行 UI | 1.0–1.3 | 保证垂直对齐 |
| 标题（1–2 行） | 1.3–1.4 | 过松会散 |
| 正文段落 | 1.6–1.8 | 长文取 1.75–1.8 |
| 长行正文 | 可略减至 1.5–1.6 | 行太长时行高过大反而割裂 |
| 段间距 | ≥1em（建议 1.5em 或 20–24px） | 首行不缩进，用空行分段（中文网页惯例） |
| 列表项间距 | ≥0.5em | 有项目符号辅助区分 |
2.4 行长（measure）——中文最容易忽略的参数
- 桌面端理想行长：35–45 个汉字（上限不超过 50）；英文对应 45–75 字符，长文目标约 66 字符。
- 做法：正文容器设
max-width: 680–760px，或max-width: 65ch。 - 后果：行长超过 60 字，读者换行时极易串行，阅读完成率明显下降；这也是很多"满屏通栏文字"看着累的根本原因。
2.5 字重、颜色与对比度
- 字重只用 400 / 500 / 700 三档，避免使用 ExtraLight（细体在 Windows 普通屏上断笔）与 Black（大屏刺眼）。
- 正文不要用纯黑
#000：推荐#1F1F1F/#333/#2B2B2B；次要信息#595959/#666；禁用#999以下浅灰做正文。 - 对比度硬性标准（WCAG 2.1 / GB/T 37668 无障碍）：普通文本 ≥4.5:1，大号文本（≥18pt 或加粗≥14pt）≥3:1；链接除颜色外须有下划线或图标等第二识别方式（色盲用户）。
- 背景避免纯白强光刺激：可用
#FAFAFA/#F7F8FA；长文阅读页提供米白/暖灰主题可进一步降低疲劳感（可选）。 - 链接要有下划线或明确标识，悬停状态有可见变化；不要用"点击这里"作锚文本。
2.6 对齐、混排与标点细节
- 全文左对齐，避免两端对齐（中文两端对齐会在窄栏产生难看字距），标题可居中但仅限短文本。
- 中英文/数字混排：中文与半角英数之间加四分之一空格或半角空格（
支持 iOS 18 系统），提升可读性；代码变量名除外。 - 中文语境下禁用全大写英文（无大小写区分，形同乱码噪音）；缩写词可用小型大写字母或直接保持原样。
- 数字统一用等宽或表格数字（
font-variant-numeric: tabular-nums），价格、日期、统计值才不会跳动。 - 标点：使用全角中文标点；避免行首出现句号、逗号、顿号、右引号等（CSS
text-spacing: trim-start/line-break: strict或标点悬挂处理）。 - 避免孤行寡句：标题下方至少跟 2 行正文；段末单字不成行。
2.7 响应式与多场景适配
| 场景 | 调整要点 |
|---|---|
| 移动端 | 正文 16px 起、行高 1.6–1.8、行长 20–25 字、触摸目标 ≥44×44px、标题级差缩小 |
| 平板/折叠屏 | 用 clamp() 做流体字号：font-size: clamp(1rem, 1.5vw + 0.5rem, 1.125rem) |
| 高清屏 | 优先 WOFF2，关闭不必要的 hinting；SVG 图标替代小字号图标字 |
| 深色模式 | 不要反手纯白字：正文用 #E8E8E8 / #D0D0D0，降低对比峰值；字重略降一档（深色背景下笔画显粗） |
| 打印 | @media print 改用系统宋体/黑体、去背景色、链接后附 URL、字号不小于 10.5pt |
| 适老化/关怀模式 | 正文 ≥18px（最好 20px）、行高 ≥1.8、一键放大不破坏布局、保留特大鼠标与高对比主题——同源同内容切换，不做独立子站（不同步是无障碍评测扣分重灾区） |
三、第三条线：性能体验——中文字体怎么做到"又快又好看"
中文字体是全站最大的静态资源之一：完整包动辄 3–10MB+，处理不当会直接导致 FOIT（文字隐形留白）、FOUT（闪烁跳变）与 CLS（布局偏移）。这一层的目标是：自定义字体带来的首屏延迟控制在 300ms 以内。
3.1 格式与体积
- 只用 WOFF2（Brotli 压缩，比 TTF 小 40–60%，比 WOFF1 小约 30%）。TTF/OTF/EOT 全部淘汰；IE 兼容需求需单独评估（2026 年基本可放弃）。
- 可变字体（Variable Font）优先：一个字族一个文件覆盖多字重，通常比 7 个静态文件总和小得多；注意可变字体首包略大，适合"字重用得多"的场景。
- CDN 分发 + 长缓存：woff2/woff/ttf 设 节点与浏览器缓存 TTL 365 天，开启 Brotli/Gzip，文件名带内容哈希。
- 跨域字体必须配
crossorigin属性，否则预加载会失效（浏览器发起双重请求）。
3.2 子集化（中文项目的必选项，收益 60–96%）
- 原理：提取页面实际用到的字符生成子集，配合
unicode-range让浏览器只拉命中分片。 - 工具：
glyphhanger（爬页面自动生成子集+unicode-range）、fontmin/vite-plugin-fontmin、font-spider、pyftsubset（fonttools）。 - 效果参考：3.2MB → 128KB；5MB 裁到 2864 字的子集后 WOFF2 可低至 180KB 以内。
- 三条红线：
- 保留足够缓冲字符（常用汉字 3500+ 及标点、数字、大小写字母），动态内容（新闻、搜索、用户输入、接口返回文案）永远无法完全命中，因此正文主字体不建议重度子集化，而应采用"全量主字体 + 标题/装饰字子集化"的分层策略；
- 修改版字体不得沿用原名（OFL 要求）；
- 子集化后的字体文件与授权文件一并归档，便于审计。
3.3 加载策略（FOIT/FOUT 的标准解法）
@font-face {
font-family: 'BrandSans';
src: url('/fonts/BrandSans-Regular.woff2') format('woff2');
font-weight: 400;
font-display: swap; /* 关键：先显示回退字体，加载完再替换 */
font-style: normal;
}
/* 标题字非首屏，延迟加载 */| font-display 值 | 表现 | 适用 |
|---|---|---|
swap | 立即显示回退字→平滑替换 | 绝大多数场景，默认选它 |
fallback | 极短阻塞期→之后可能不再替换 | 品牌字要求较严但不想留白 |
block | 长时间空白后突然显示 | 仅在品牌严格且字数极少时用（如 LOGO 字） |
optional | 要么立刻有，要么不用 | 性能极端优先的营销页 |
配套动作：
- 只预加载首屏必需的 1–2 个字体文件（
<link rel="preload" as="font" type="font/woff2" crossorigin>），遵循"3 个关键资源"原则，预加载泛滥反而抢带宽； <link rel="preconnect">提前连字体 CDN 域名；- 非首屏字体在
load事件后用FontFaceAPI 懒加载； - 用
size-adjust/ascent-override微调回退字体尺寸，让 FOUT 跳动几乎不可感知； - 服务端内联关键 CSS（含 @font-face 声明），避免额外往返。
3.4 降级与兜底（决定"网络慢的时候网站像不像半成品"）
body {
font-family: "BrandSans", "PingFang SC", "HarmonyOS Sans SC",
"Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
}- 回退栈选择字面率、x高度接近的系统字体，替换瞬间的版面跳动最小；
- 彻底禁用自定义字体时，网站必须依然完整可读、层次不乱——这是验收必测项；
- 减少布局偏移：给含文字的容器定高或用相同行高的回退栈，CLS 控制在 ≤0.02。
四、把规范落成文档：一份可直接用的字体规范骨架
1. 品牌字体系 - 主字体：XXX（来源/授权编号/字重清单/使用范围） - 辅助字体：XXX（仅限 H1/H2、Banner、专题页） - 等宽字体：XXX（代码、订单号、数据表） - 禁止清单：微软雅黑（商用发布）、方正系未授权款、来源不明字体 2. 字号阶梯（桌面/移动双列，rem 值 + px 对照） 3. 行高与间距表（标题/正文/辅助/按钮/列表/段间距） 4. 层级映射（H1–H6、正文、引用、图注、标签、按钮、导航、表格） 5. 色彩与对比度（正文色阶、链接色、禁用色、深色模式映射、对比度实测值） 6. 行长与版心（max-width、分栏规则、卡片内文字宽度） 7. 中英混排与标点规则（空格、数字格式、日期/金额单位写法） 8. 响应式断点与流体字号公式 9. 适老化/关怀模式映射表（字号→放大档位、行高、对比主题） 10. 字体工程规范（格式、子集策略、命名、缓存、CDN、回退栈、font-display） 11. 无障碍条款（键盘焦点可见、缩放 200% 不丢内容、不靠颜色传递信息） 12. 资产与授权归档（字体文件哈希、授权书、发票、到期提醒责任人）
建议把这套规范做成 Design Tokens（JSON/CSS 变量），而不是停留在 PDF 里——这样开发直接消费，设计与代码不会脱节。
五、验收清单：逐项打勾再上线
A·版权与授权
- 全站字体（含 Banner 切图、视频封面、PDF 附件、LOGO 字）均在白名单内
- 授权书 + 发票已归档，授权范围覆盖"网站/互联网发布"
- 外包合同含字体侵权责任条款
- 无调用第三方不明 CDN 字体链接（防止被挂马与版权连带风险）
B·视觉与排版
- 正文 ≥17px（移动 ≥16px）、行高 1.6–1.8、行长 ≤45 汉字
- H1 唯一；字号阶梯呈规律比例，无随机字号
- 左对齐，无两端对齐造成的字距裂缝
- 正文对比度 ≥4.5:1（实测截图归档），无 #999 及以下灰色正文
- 字重仅用 400/500/700，无 ExtraLight 小字
- 中英文混排空格、数字等宽、标点无行首残留
- 全站字族 ≤2 个，无"每个版块一种字体"
C·无障碍
- 浏览器字号放大到 200% 布局不崩坏、内容不丢失
- 纯键盘可操作，焦点环清晰可见
- 链接除颜色外有第二识别方式
- 关怀模式同源切换、内容与主站一致
- 无闪烁/自动滚动文字，尊重
prefers-reduced-motion
D·性能
- 仅 WOFF2（可变字体或按字重拆分），无 TTF/OTF/EOT
- 主字体未过度子集化；标题/装饰字已子集化 + unicode-range
font-display: swap生效；关键字体 preload 且带 crossorigin- CDN 缓存 365 天、Brotli 开启、文件名带哈希
- 字体加载时间 ≤400ms，CLS ≤0.02，Lighthouse 无障碍/最佳实践 ≥90
- 关闭自定义字体后页面仍完整可读（实测）
E·兼容
- Chrome/Edge/Safari 近两个大版本、iOS Safari、Android Chrome、微信内置浏览器真机各测一台
- 老浏览器优雅降级提示（不强制装插件、不强制特定浏览器）
六、Top 12 常见误区（避坑）
- 把"微软雅黑"当免费字体用在 Banner 上——最经典的侵权陷阱。
- 设计师本机有什么就用什么，交付时才发现全站用了 6 种字体。
- 正文 13–14px + 行高 1.2，为了"紧凑好看"牺牲可读性。
- 通栏满屏文字不设 max-width，行长七八十个字，读者看两行就累。
- 只改设计稿不改规范，开发凭感觉还原，上线与设计稿差距巨大。
- 全量引入中文字体 5MB，首屏空白两秒，然后为了性能又被迫删掉。
- 没有 font-display 也没有回退栈，要么隐形要么跳变。
- 重度子集化正文，动态新闻一更新就出现缺字方块（☐）。
- 纯黑字纯白底 + 浅灰注释，前者刺眼后者看不清，两头都不讨好。
- 宋体小字号上普通屏，横笔糊成一团。
- 关怀模式做成独立子站，长期不同步，被投诉比不做还糟。
- 授权书存在离职员工电脑里，人员一变就失去合法来源证据。
七、FAQ
Q：一定要用定制字体吗？用系统字体不行吗？可以，而且系统字体栈（system-ui, "PingFang SC", "Microsoft YaHei"）在性能和兼容性上是满分答案。定制字体的价值主要在品牌识别与标题气质，而非正文可读性。性价比最高的组合是：正文用开源黑体（思源/普惠体）+ 品牌标题用一款授权字，成本极低、效果显著。
Q：免费商用字体真的完全没风险吗？OFL/CC0 类字体在"使用"层面基本安全，但要注意：① 修改后不得沿用原名、不得单独售卖；② 嵌入 App 或软件分发属"分发行为"，需保留授权文本；③ 条款可能随版本更新，正式项目前请把字体包内的 LICENSE 再看一遍；④ 第三方聚合站的标签可能出错，尽量从官网或 GitHub 下载。
Q：中文字体太大，能不能只加载首屏？能，但要分层：正文主字体保留全量（或轻度子集，留足缓冲字符）+ 标题/装饰字重度子集化并按路由懒加载。正文一旦重度子集化，CMS 动态内容必然缺字，这是不可逆的体验事故。
Q：怎么判断一个网站的字体排印好不好？三分钟自测法。① 随便打开一篇正文，看行长是否超过 50 字、行高是否小于 1.5；② 选中一段文字，看是否出现三种以上字体；③ 把浏览器字号调到 200%，看布局是否崩坏；④ 用手机在户外阳光下看正文是否清楚（对比度测试）；⑤ 清缓存刷新，看文字是否先空白再闪现。五项都过关，基础分就有了。
Q：政务/事业单位网站有特殊要求吗？有。除上述规范外，还需满足 GB/T 37668-2019 无障碍可访问性、适老化关怀模式（同源同步、键盘可达、语音朗读兼容）、色调不宜超过 3 种、正文不小于规范值、不得强制特定浏览器与插件。详见《政府/事业单位网站设计完整解决方案》。
结语
做好网站字体这件事，本质上是三句话：选对两款字并守住白名单，把字号/行高/行长三个数字调到位，再用 WOFF2 + 子集 + swap 让它快到看不见。
前一句守住法律底线，中间一句决定用户愿不愿意读完，最后一句决定用户等不等得及。三者缺一不可——因为再美的排版，如果加载不出来或者不敢公开发布，就只是设计稿上的自我欣赏。
