减少每个路由要求浏览器处理的字体工作量
对首页、转化页、登录后视图和使用不同设计系统的模板进行冷缓存字体请求清单。记录家族、字重、样式、文件、来源、传输大小和选择器。声明 @font-face 并不会自动触发下载;浏览器通常在当前布局使用该字体时才去抓取。这使得全局未使用的字重和样式首先值得移除。
在确实承载品牌价值的地方使用自定义字体,通常是展示型标题;在设计允许的情况下,正文可以考虑使用系统字体栈。不要默认认为可变字体总是更小:它可以替代多个静态文件,但也可能比某个静态面更大。对比路由实际请求的压缩资产。
删除在路由级别没有经过测试使用的家族、字重、斜体和图标字体。
在更改构建前,检查许可证是否允许网页交付、子集化和自托管。
使用 WOFF2 并在不丢失所需字符的前提下做子集化
以 WOFF2 作为现代浏览器的基线。W3C Recommendation 将 WOFF2 描述为为改进压缩和快速解压而设计的网页字体包,且主要浏览器已实现。仅在有明确遗留浏览器需求时保留其他格式;否则,设计良好的回退是更安全的兼容路径。
子集化(subsetting)会生成仅包含所选字形(glyphs)的更小文件。unicode-range 可以将子集与字符范围关联,让浏览器在匹配文本时选择相关文件。基于真实页面和你支持的语言构建子集,包括标点、货币、姓名、法律文本和用户输入的脚本。缺失的字形是正确性问题,不应为了节省字节而接受。
测试具有代表性的本地化页面和表单输入,而不仅仅是英文设计样例。
确保每个子集的 unicode-range 及其字重/样式范围与部署的文件相匹配。
把回退字体和 font-display 策略一起设计
回退字体是自定义字体未就绪时用户看到的内容。为相似的比例选择它,然后在真实的标题、多行按钮、导航、表格、表单和长本地化字符串上比较。不同行宽会改变换行;不同的 ascent、descent 或 line-gap 会改变块高。这两者都可以移动页面上已可见的内容。
font-display 定义在字体不可用时的呈现行为。optional 有非常短的 block 周期且没有 swap 周期,因此当首访更重视稳定回退时可适用于正文。swap 会及时显示回退并稍后应用 web 字体,但仅在迟到替换不会引起破坏性重排时才使用。block 或 fallback 应基于经过测试的设计理由,而不是全局默认。CSS 的 size-adjust 可以帮助调整回退的度量,但要对每种支持的书写系统和视口进行视觉验证。
不要让支付、找回、账户、安全或导航文本依赖于可能迟到的自定义字体。
回退字母可能传达错误含义;对于界面符号,SVG 图标通常更安全。
改进发现流程,但对 preload 保持克制并评估数据流
仅在外部样式表中声明的字体面可能在该样式表下载并解析后才被发现。可维护的早期关键 CSS 可以更早地暴露必要的声明;不要将字体二进制内联到文档中,这会增大文档大小。对于第三方来源,preconnect 可以更早建立连接。字体请求属于 CORS 资源,因此跨域交付和预加载需要正确的 crossorigin 处理。
Preload 是一种优先级覆盖,而不是万能的加速开关。它可能与其他关键工作竞争,也可能下载路由从未需要的字体;它还会绕过 unicode-range 的选择。先修复发现延迟,然后最多对一个经过验证的首访文件使用 preload,且必须使用精确 URL、as=font 与 crossorigin。Google Fonts 表示其 API 请求包括访问者 IP 地址、请求的 URL、HTTP 头和 Referer;同时声明其 API 不设置或记录 cookie,也不将收集的信息用于用户画像或定向广告。自托管可以阻止 Google 收到这些加载的数据。在需要时评估交付、隐私声明、管辖权、合同及寻求合格意见。
对比冷缓存跟踪并确认预加载文件在该路由被消费。
权衡连接建立、缓存和 CDN 能力、资产维护以及访问者数据流向。
对字体资产版本化并保留经过测试的 CSS 回退配置。
测试渲染行为,并将字体作为弹性依赖来运维
在冷缓存下,使用浏览器网络工具检查从 CSS 到字体请求的链路、时序、来源、缓存和失败情况。在受限连接下重复,然后节流或阻止字体。成功的判定是:在自定义字体出现前文本可读、控件可用、符号准确且布局连贯。测试真实的窄屏和桌面布局、长字符串、错误、合规/同意文案、价格以及每种支持的文字系统。
在 Chromium 中,在 Performance 面板记录一次重载并检查 Layout Shifts 轨迹;DevTools 能识别被移动的元素并动画化偏移。字体加载是已知的罪魁祸首之一,但被移动的元素未必就是根本原因,因此需将跟踪与字体应用进行关联。Layout Instability API 目前仅限 Chromium,这使得跨浏览器的视觉检查变得重要。将字体资产、CORS 行为、缓存策略、回退和回滚纳入发布审查。预期的降级模式应是可读文本,而非空白内容或损坏的导航。
热缓存会掩盖首次请求和渲染问题。
在文件、CMS 文案、模板、供应商或 CDN 规则更改后重复检查。
