PWA 最佳实践：网络字体还是本地字体？

Question

我正在构建一个 preact PWA（渐进式 Web 应用程序），我不知道是否应该将字体保留在外部以减少应用程序大小，或者将字体保留在本地以改善离线查看？最佳实践是什么？

Answer 1

2021 年 2 月更新：浏览器通常朝着HTTP 缓存分区的方向发展，这意味着类似 CDN 的 URL（例如 Google Fonts）不太可能因不相关的 Web 应用程序先前请求过相同的内容而导致缓存命中网址。这消除了支持使用 CDN 字体的常见论点。像fontsource这样的项目可以自动发送开源字体的本地副本，虽然这需要更多工作，但如果您最关心性能，我可能会选择它。

根据您的要求，我认为使用第三方或第一方托管的网络字体不会产生影响。可以使用服务工作人员内部的缓存存储 API 来缓存一般的第一方或第三方请求（包括 Web 字体请求），并在离线时使用这些缓存的资源。

有一些加载网络字体的通用最佳实践， Zach Leatherman 的这篇文章是我的首选参考。不过，这些技术并不是专门用于构建具有离线功能的 PWA。