企业官网 Web 字体怎么交付？授权、系统字体、WOFF2、中文子集、预加载、font-display、CLS、缓存与回滚清单
企业官网选了一套品牌字体，设计稿看起来统一，上线后却可能出现三种结果：中文字体文件大到拖慢首屏，字体加载完成时标题突然换行，或授权只允许桌面设计，不允许网页嵌入。Web 字体交付需要同时处理版权、字形覆盖、文件格式、加载策略、回退字体和性能监控。下面这份清单从选型、子集化、CSS、CDN、CLS、无障碍和回滚入手，帮助团队把字体从设计资源变成可验收的线上资产。
先决定是否真的需要 Web 字体
品牌标题或少量展示文字需要独特字形，不代表全站正文都要下载一套中文字体。系统字体无需额外网络请求，覆盖广、启动快。先写清字体承担的角色，再决定使用范围。
把品牌表达和正文阅读分开
标题、数字、按钮和长篇正文对字重、识别度和加载速度的要求不同。品牌字体可以用于少量标题，正文保留系统字体。不要为了视觉统一，让每个访客下载多个大字库。
设计系统记录字体决策
字体家族、字号、行高、字重、字符集、用途和回退链都应进入设计 token 与组件规范。已有品牌色、组件和响应式规则可结合企业官网设计系统交付清单管理，避免页面各自声明字体。
先拿到可核验的授权文件
采购订单或设计师电脑里有字体文件，不等于允许网站嵌入。保留许可名称、供应方、被许可主体、域名、流量或期限限制、允许格式、修改和子集化条款，以及续费联系人。
核对授权覆盖的主体与域名
集团、子公司、海外站、测试站和活动域名可能不在同一许可范围。上线清单逐个列出真实域名与使用主体，不能用“公司官网”四个字代替。
确认是否允许自托管
部分许可要求从指定服务加载，部分允许企业自托管。自托管前确认能否转换格式、压缩、子集化和放到 CDN。技术上能做的处理，合同上未必允许。
确认页面浏览量或席位限制
有些字体按月页面浏览量、应用数量或开发环境授权。监控口径和超量处理方式写进资产记录。流量增长后才发现授权不够，会让团队在高峰期被迫换字体。
开源字体也要保存许可证
开源并不等于没有条件。保存许可证原文、字体版本、下载来源和修改记录。Google Fonts 的官方 FAQ说明其字体采用开放许可，但每个字体的具体许可证仍应随项目留档。
字体文件进入数字资产清单
记录原始文件、网页派生文件、哈希、版本、授权、覆盖字符和使用页面。完整的图片、视频、字体和文档资产治理可衔接制造业官网数字资产管理清单。
不要从未知网站下载字体
非官方镜像可能缺字、被修改或授权来源不明。使用字体厂商、正式采购渠道或可信开源仓库的文件，下载后保存校验值。团队成员之间不通过聊天工具反复转发无版本文件。
建立字体家族与字重清单
列出实际需要的 regular、medium、bold、italic 等面。设计稿里出现的每个字重不一定都值得独立下载。先统计组件使用，再删除未用字重。
不要用伪粗体代替真实设计
浏览器在缺少对应字重时可能合成粗体或斜体，字形和排版会偏离品牌规范。需要准确展示时提供真实面，并按需要控制字体合成；不重要的正文则允许合理回退。
可变字体需要真实收益
一份可变字体可以覆盖多个粗细或宽度，也可能比网站实际需要的两个静态面更大。比较压缩后的总字节、浏览器覆盖和设计用途，再决定是否采用。
确定中文、拉丁和符号覆盖
中文站可能同时出现英文品牌、型号、希腊字母、货币符号、上下标和技术单位。建立代表性字符集，检查每个字形来自哪个字体。缺字时浏览器会逐字符回退，导致一行文字混合多种视觉度量。
简繁体需求分开核对
简体、繁体和日文汉字存在字形差异，不能只看“都能显示”。多语言站按页面语言选择适合的字体与 `lang`，并用当地语言样本验收。不要把一份简体子集强行用于繁体页面。
产品型号不能在子集化时丢失
型号、单位和特殊符号常来自 PIM 或 CMS，构建时扫描静态文案未必能发现。把动态数据的字符来源纳入清单，或为不可预测区域设置覆盖更广的回退字体。
表单输入要支持用户文字
网站正文只用常见汉字，不代表用户姓名、公司或留言也只含这些字符。表单控件优先使用系统字体或完整回退链，不能因品牌子集缺字而显示方框。
WOFF2 作为常见网页交付格式
W3C 的WOFF 2.0 规范编辑稿定义了面向网页的压缩字体格式。项目仍要根据目标浏览器确定回退格式，不能仅因文件后缀正确就跳过兼容测试。
原始设计文件不要直接公开
TTF、OTF 或可编辑源文件是否允许分发取决于许可。线上只部署经过批准的网页格式与子集，把原始文件保存在受控资产库，不放进公开源码仓库。
文件名包含家族、范围和版本
例如区分家族、字重、语言子集和内容哈希。不要长期使用 `font-final-new2.woff2`。稳定命名方便缓存、回滚和排查，也能避免不同供应商文件互相覆盖。
内容哈希用于不可变缓存
字体内容变化时生成新文件名，旧文件保持可访问到回滚窗口结束。CSS 更新后引用新 URL。这样可以使用长期缓存，又不会让旧字体被同名文件悄悄替换。
子集化前统计真实字符来源
扫描模板、CMS、产品数据、法务文本、表单状态和多语言资源。构建阶段生成字符清单并保存版本。只扫描首页会漏掉详情页、错误页和后台返回文案。
中文子集按业务分层
可把常用界面字符、品牌与产品专用字符、低频内容拆开，按页面需要加载。拆分过细会增加请求和管理复杂度。方案要用真实页面与缓存命中测试，而不是只比较单个文件大小。
unicode-range 需要与文件匹配
CSS Fonts 规范支持用 `unicode-range` 描述字体覆盖范围。声明与文件实际字形不一致时，浏览器可能发起多余请求或出现缺字。每个子集都要自动检测覆盖。
动态内容为缺字准备回退
评论、新闻标题或产品名上线后可能出现新字符。回退链先保证可读，再由监控发现缺字并更新子集。不要让字体失败阻止页面发布。
子集生成工具固定版本
不同工具或参数会改变字形、hinting、OpenType 特性和压缩结果。把工具版本、命令参数、输入哈希和输出哈希写进构建记录，避免每次生成结果不可复现。
不要擅自删除必要 OpenType 特性
压缩时可能移除连字、数字样式、语言替代或变量轴。先列出设计实际使用的特性，再做精简。输出文件要由设计和前端一起验收。
给子集做字符回归测试
测试页覆盖常用汉字、品牌名、型号、标点、数字、货币、上下标、繁体样本和错误提示。构建后用自动脚本检查字形存在，再由浏览器截图确认视觉结果。
CSS 中每个字体面单独声明
`@font-face` 的家族、来源、字重、样式和显示策略要与真实文件对应。MDN 的@font-face 参考列出了常用描述符与语法。不要让 bold 文件被声明成 regular。
字体家族名称保持稳定
CSS 内部家族名可与市场名称区分，但全项目统一。不同子集和字重使用同一家族并以描述符区分。拼写差异会让某些页面静默回退。
src 顺序按实际支持设计
优先列出目标浏览器支持且体积合适的格式，再提供必要回退。是否使用 `local()` 要谨慎，因为用户本地同名字体可能版本不同，导致难以复现的视觉差异。
不要把格式提示写错
URL、MIME 和 `format()` 提示应与文件一致。部署后检查响应内容类型，确认浏览器没有拒绝字体或按错误格式处理。只看网络状态 200 不够。
字体文件必须允许跨域加载
字体从 CDN 或独立静态域名加载时，设置正确的 CORS 响应。页面预加载也要使用匹配的跨域属性，否则浏览器可能下载两次。跨域策略不能用全局放开敏感资源来解决。
定义可靠的回退链
品牌字体之后列出度量接近的系统字体和通用家族。Windows、macOS、Android、iOS 与 Linux 的可用字体不同，不能只写一个本机名称。CSS 工作组的CSS Fonts 编辑稿描述了字体家族匹配和回退机制。
回退字体先保证字形完整
当 Web 字体失败或缺字时，用户仍应读到全部文本。回退方案先看字符覆盖和可读性，再看是否完全复刻品牌。技术文档中的单位和符号尤其要检查。
调整回退度量减少布局跳动
品牌字体和系统字体的字宽、上升部、下降部与行距不同。可评估 `size-adjust`、`ascent-override`、`descent-override` 和 `line-gap-override` 等描述符，使交换前后的占位更接近。使用前检查浏览器支持。
font-display 按用途选择
MDN 的font-display 参考说明了 block、swap、fallback、optional 等值对应的阻塞与交换周期。正文、品牌标题和图标字体可以采用不同策略。
swap 不保证没有 CLS
`swap` 让回退文字尽快可见，Web 字体到达后仍会替换。两种字体度量差异大时，标题换行和按钮宽度会变化。必须用布局偏移数据和截图验证，不能只凭配置值判断。
optional 可能本次不换字体
浏览器可根据网络状况决定继续使用回退字体。若品牌字形属于必须一致的法律标识或核心视觉，不能在不了解行为的情况下全部设为 optional。
block 要控制不可见文字时间
长时间隐藏正文会损害阅读体验，弱网用户尤其明显。只有极少量、尺寸可控且对显示完整性要求高的内容才考虑更强阻塞，并进行低速网络测试。
预加载只给首屏必需字体
预加载会提高字体请求优先级，也会与其他首屏资源争抢带宽。只预加载首屏确实使用的格式和子集，URL、类型与 CORS 属性必须与 CSS 请求完全一致。
不要预加载全部字重
正文常规体和首屏标题体可能需要优先，页脚、弹窗或下方内容使用的字重无需抢占。用网络瀑布确认预加载文件在首屏真的被消费，未使用警告要处理。
CSS 发现路径影响加载时机
字体声明藏在深层异步 CSS 中，浏览器要经过多次请求才发现字体。关键样式与字体声明安排在合理位置，减少发现延迟。不要为了“内联一切”把大量非关键 CSS 塞进 HTML。
按实际文字触发字体请求
浏览器通常在页面确实需要某个字体面时才请求文件。空组件、隐藏弹窗和未用字重不应提前下载。检查 CSS 选择器是否过宽，导致全站每页都触发品牌字体。
用 Font Loading API 处理必要场景
CSS 工作组的CSS Font Loading 编辑稿定义了脚本观察和控制字体加载的接口。一般正文依靠 CSS 即可，只有需要等待字体测量或生成画布时再使用 API，且要设置超时与回退。
不要让脚本等待字体后才显示正文
把整个页面设为隐藏，等 `document.fonts.ready` 后再显示，会把字体故障变成白屏。文本应先用回退字体可读，脚本只增强需要精确测量的组件。
字体图标应评估替代方案
一套图标字体常为了十几个图标下载整份文件，并在加载失败时显示方框。SVG 图标更容易逐个加载、设置无障碍名称和控制颜色。若继续使用字体图标，限制字符映射与用途。
避免关键含义只靠特殊字形
警告、下载、电话等操作不能只显示一个私有区字符。提供文本或可访问名称，字体失败时仍能理解。无障碍整体要求可参考企业官网无障碍验收清单。
字号和对比度不由字体品牌豁免
细字重、小字号和浅色组合可能在设计稿上精致，在低分辨率屏幕上难读。测试不同系统的实际栅格化效果，确保正文和操作文字保持可辨识。
用户缩放时不能裁切文字
字体变大后，固定高度按钮、卡片和导航可能截断。测试浏览器文本放大、页面缩放和系统大字体。组件尺寸应适应内容，不能依赖某个字体的精确像素。
行高考虑中英文混排
中文、拉丁字母、数字和上下标的实际边界不同。正文行高既要可读，也要避免上下一行相碰。不要直接把英文品牌手册里的紧凑行高套到中文长文。
字重映射检查各平台表现
某些系统字体没有完整字重，浏览器会匹配相邻面或合成。标题、按钮和表格在主流平台逐一检查。设计系统写的是数值，不代表每台设备显示相同。
测量字体文件传输体积
记录原始大小、压缩后大小、缓存命中和实际页面请求总量。中文字体优化看的是首屏需要下载多少，而不是资产库里所有分片总和。web.dev 的WebFont 加载优化指南提供了加载与渲染的检查思路。
网络瀑布确认请求顺序
观察 HTML、CSS、字体和主图的发现及完成时间，检查重定向、DNS、TLS 与跨域。字体晚发现时，先修请求链，不急着增加更多 preload。
慢速网络检查 FOIT 与 FOUT
在限速、无缓存条件下录屏，记录文字不可见时长、回退字体出现时间、字体交换和布局变化。不要用办公室高速网络代表海外访客。
CLS 按元素定位
布局偏移可能来自图片、广告、Cookie 横幅或字体。使用性能工具查看具体偏移元素和时间，与字体网络请求对齐。确认因果后再调整回退度量或显示策略。
标题换行是常见字体偏移
回退字体略宽，标题可能多一行；品牌字体到达后又收回，下面整块内容移动。测试长中文标题、英文型号和移动窄屏，不只看首页短口号。
按钮宽度不要绑死某套字形
不同语言和回退字体会改变文字宽度。按钮使用内边距与最小尺寸，不用固定宽度勉强容纳设计稿文案。字体交换后仍应保持可点击和不溢出。
真实用户数据按地区分析
字体 CDN 在国内、欧美和其他目标市场的连接与缓存表现不同。按地区、设备和网络观察 LCP、CLS、字体请求失败率，避免全站平均值掩盖目标客户问题。
实验室数据用于复现
Lighthouse 或浏览器限速能稳定比较版本，但不代表全部用户。把实验室瀑布、截图与真实用户数据结合，发布前阻止明显回退，发布后确认实际改善。
遵循字体性能的整体原则
web.dev 的字体最佳实践覆盖自托管、预加载、内联声明、显示策略和布局偏移。具体实施仍要按本站字体、页面和用户数据验证，不能照抄单一配置。
CDN 设置正确内容类型
WOFF2 等文件返回匹配的 MIME 类型，并保留必要 CORS 头。边缘节点、源站和对象存储的配置要一致。CDN 的缓存、回源、HTTPS 与刷新可结合企业官网 CDN 验收清单。
哈希字体使用长期缓存
内容指纹不变的字体可设置较长缓存和不可变策略。引用它的 CSS 或清单采用能及时更新的版本机制。没有哈希的同名文件不要配置永久缓存。
字体更新先上传文件再切 CSS
新字体文件到达所有存储和 CDN 后，再发布引用它的 CSS。反过来会让一部分访客收到新 CSS 和 404 字体。部署检查从多个区域请求文件。
缓存刷新不要删除旧版本
哈希文件无需覆盖。旧页面、Service Worker 或回滚版本仍可能引用旧字体，过早删除会制造故障。保留到版本和缓存窗口结束后再清理。
第三方字体服务评估依赖
外部字体服务增加 DNS、TLS、可用性、隐私和供应商变化。记录请求域名、数据处理、缓存行为与故障回退。相关外部脚本和服务可参考企业官网第三方脚本治理清单。
自托管也要承担更新责任
把字体下载到自有服务器后，团队负责许可续期、文件修复、版本升级、CDN 与安全响应。自托管减少第三方请求，不会自动消除运维工作。
安全策略允许必要字体源
Content Security Policy 的 `font-src` 只列当前字体来源。发布前在报告模式检查阻断，再收紧规则。不要为了临时解决加载错误加入宽泛通配。
字体失败纳入运行监控
监控核心字体 URL 的状态、内容类型、大小、缓存和 CORS，浏览器端采样字体加载错误。整体证书、资源和性能告警可衔接企业官网运行监控清单。
不要把 200 当作字体可用
服务器可能返回 HTML 错误页、损坏文件或错误 CORS。自动测试解析字体头，核对文件哈希和浏览器控制台。状态成功只是第一层证据。
建立代表性页面测试集
覆盖首页、长标题、产品参数表、文章、表单、错误页、多语言、移动导航和弹窗。每页测试冷缓存、热缓存、字体失败与低速网络，确认都能阅读和操作。
截图覆盖主流操作系统
Windows、macOS、Android 与 iOS 的字体渲染和系统回退不同。使用相同文案、视口和版本截图比较，记录可接受差异。设计师本机不是唯一标准。
检查缺字与豆腐块
自动遍历测试字符并截图，重点看生僻客户名、产品符号、单位、繁体字和 emoji。缺字时确认回退是否正常，而不是把所有字符强行补进品牌字体。
检查伪粗体与伪斜体
浏览器开发工具确认实际使用的字体面。CSS 声明 600，但文件只提供 400 时，视觉可能由合成产生。根据设计需求补文件或调整映射。
检查重复下载
预加载与 CSS 的 URL、跨域属性或格式不一致，会让同一文件下载两次。多个 CSS 包也可能重复声明字体。网络瀑布按 URL 和发起者排查。
检查未使用字体
某字重或语言子集在代表页面始终未请求，可能可以延迟或删除。分析一段足够长的真实访问，避免因测试样本太少误删低频但必要字符。
检查打印和 PDF 输出
网页打印、报价单和浏览器导出 PDF 可能使用不同字体处理。确认许可是否允许相应用途，并测试文字可选、分页、符号和中文不丢失。
发布前保存性能基线
记录当前字体请求数、字节、LCP、CLS、文字出现时间和错误率。新字体上线后按相同页面、设备和网络对比。没有基线就无法证明视觉改版的性能代价。
采用小流量或分页面上线
先在少量模板或一个语言版本验证授权、加载与布局，再扩大范围。CSS 变量或配置控制字体应用，避免在每个组件里散落临时开关。
定义自动回滚门槛
核心字体 4xx/5xx、缺字、文字不可见、CLS 明显上升或关键页面布局破坏都可触发回滚。回滚恢复 CSS 引用和字体配置，不删除已上传的版本文件。
回滚先保证文字可读
最安全的紧急方案通常是恢复系统字体栈，而不是现场重新生成子集。品牌视觉可以稍后修，正文和操作不能继续不可见或错位。
版本发布记录包含字体
每次上线记录字体家族、许可版本、源文件哈希、子集规则、CSS 版本、CDN 地址和回滚目标。问题发生后能快速判断是授权变更、文件问题还是样式配置。
季度复查授权与用量
检查域名、主体、页面浏览量、使用页面和供应商条款是否变化。停用字体后清理 CSS 引用和公开文件，资产记录仍保留历史许可与版本证据。
凯乐丰可以协助哪些环节
凯乐丰可在企业官网建设中完成字体选型、前端加载、响应式排版和性能验收，也可通过企业数字化方案梳理字体资产、版本与权限。若现有网站出现中文字体过大、文字闪烁或 CLS，可从凯乐丰联系页面提交字体来源、页面样本和目标市场。
上线前最后核对
| 检查面 | 最低通过条件 | 常见风险 |
|---|---|---|
| 授权 | 主体、域名、流量、格式、自托管、修改和子集化范围有书面证据 | 有文件却无网页嵌入权 |
| 字形 | 中英文、型号、单位、符号、多语言和动态输入都有可读回退 | 子集缺字或混合字形 |
| 加载 | WOFF2、CSS、CORS、预加载、font-display 和缓存按真实瀑布验证 | 重复下载或长时间隐字 |
| 视觉性能 | 慢网、冷缓存、多系统下文字出现、换行、CLS 与交互均通过 | 字体交换导致页面跳动 |
| 运维 | 文件版本、监控、旧资源保留、回滚门槛和许可复查均有负责人 | 更新后无法还原旧版本 |
Web 字体交付做得稳，访客先看到可读文字，品牌字体随后到达也不会把页面推来推去；字体加载失败时，页面仍然完整。团队要控制的不是某个 CSS 属性，而是授权、字形、网络、排版和版本之间的整条链路。把每个字体面当作有许可、有体积、有故障模式的线上资产，官网视觉才不会以加载速度和可读性为代价。
