Web 字体授权与加载治理

大理论

Web 字体的设计决策跨越审美、授权、隐私、性能和国际化。Google Fonts、Fontsource、Bunny Fonts 和自托管 WOFF2 都可能是正确方案，但判断依据不同：前者是字体发现和生态入口，Fontsource 适合 NPM 版本锁定和自托管，Bunny Fonts 适合允许 CDN 且强调隐私/GDPR 的场景，自托管适合严格合规、离线和可控性能预算。

小知识点

1. 授权按字体家族或字体包确认，不按平台名确认；记录 license 名称、许可证链接、是否允许商用、归因和再分发边界。
2. 字体交付先问约束：是否允许第三方请求、是否需要离线/内网、是否需要版本锁定、是否有隐私/GDPR 要求。
3. 优先 WOFF2、变量字体和必要 subset；不要为一个 UI 一次加载多个 weight、italic 和完整 CJK 字符集。
4. font-display、preload 和 local fallback 是组合策略：只 preload 首屏关键字体，不把所有字体都设为高优先级。
5. fallback stack 要按 script 拆开：Latin、CJK、mono、emoji 的字宽、行高和标点表现都会影响按钮、表格和导航。
6. 字体文件进入仓库或 CDN 后，要保留 license 文件或来源记录，避免后续无法追溯。

设计判断

一个健康的字体方案可以回答六个问题：这是什么字体、来自哪里、授权是什么、怎么加载、加载失败时长什么样、对性能和隐私有什么影响。答不全时，只能作为候选，不应直接进入生产实现。

实现建议

为每个字体角色建立 font matrix：role、family、source、license、weights/styles、scripts、delivery、fallback、file size、preload、font-display、QA notes。Next.js 项目优先使用 next/font 或本地 WOFF2；需要 NPM 可复现安装时使用 Fontsource；只有在产品允许外部字体 CDN 时才用 Bunny Fonts 或类似服务。CJK 字体优先系统 fallback 或精确子集，不要把完整多权重字体族打包进首屏。

反例/风险

把 Google Fonts 或 Fontsource 的平台授权当作所有字体授权、直接复制外部 CSS 造成第三方请求、为中英文 UI 加载完整 Noto CJK 多权重、没有 fallback 导致按钮高度跳动、只在桌面英文样稿验证字体而忽略中文和 200% zoom。

案例分析

Fontsource 官方说明其优势包括自托管、版本锁定、隐私、离线和额外字体，但仓库也提醒要读取每个字体的许可证。Bunny Fonts 把自己定位为开源、隐私优先、无追踪、Google Fonts CSS v1 兼容的字体平台，同时 FAQ 提醒字体仍按具体 family 查看授权。可学习点是：交付平台解决工程路径，不替代字体级授权和性能治理。

来源链接

Fontsource introduction: https://fontsource.org/docs/getting-started/introduction Fontsource repository: https://github.com/fontsource/fontsource Bunny Fonts about: https://fonts.bunny.net/about Bunny Fonts FAQ: https://fonts.bunny.net/faq Google Fonts licensing: https://fonts.google.com/knowledge/glossary/licensing