我们如何在 Angular 中预加载字体？

Question

我们是否应该在 index.html 文件中包含带有rel="preload" 的字体，就像下面的代码一样，或者我们可以在 Angular CLI 中配置它以预加载所需的所有字体？
请建议我一个更好的解决方案，因为我可以看到 Google 分析中建议的页面加载时间需要几秒钟。

<link rel="preload" href="./assets/fonts/Lato/Lato-Semibold.woff2" as="font" crossorigin>
<link rel="preload" href="./assets/fonts/Lato/Lato-Black.woff2" as="font" crossorigin>
<link rel="preload" href="./assets/fonts/Lato/Lato-Bold.woff2" as="font" crossorigin>
<link rel="preload" href="./assets/fonts/Lato/Lato-Heavy.woff2" as="font" crossorigin>
<link rel="preload" href="./assets/fonts/Lato/Lato-Medium.woff2" as="font" crossorigin>
<link rel="preload" href="./assets/fonts/Lato/Lato-Regular.woff2" as="font" crossorigin>

Answer 1

1. 预连接到字体文件源。
2. 以低优先级异步预加载字体样式表。
3. 异步在使用 JavaScript 呈现内容后加载字体样式表和字体文件。
4. 为关闭 JavaScript 的用户提供后备字体。

示例::

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2family=Merriweather&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2family=Merriweather&display=swap" media="print" onload="this.media='all'" />
<noscript>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2family=Merriweather&display=swap" />
</noscript>

供您参考：Link to Harry Roberts explanation on fonts loading

Answer 2

对于这个 Angular 实现，你应该使用第三方依赖来加载字体。

使用webfontloader

npm i webfontloader

然后像这样加载您的自定义字体

 WebFont.load({
  custom: {
    families: [""Lato"]
  }
 });

Answer 3

对于这个 Angular 实现，您应该使用第三方依赖项来加载字体。,查找集中的、受信任的内容并围绕您最常用的技术进行协作。,在一个单一的位置连接和共享知识结构化且易于搜索。 之后像这样加载您的自定义字体

   WebFont.load({
              custom: {
                 families: [""
                    Lato "]
                 }
              });

Answer 4

虽然这不是 Angular 解决方案，但您似乎可以进行另一个 html 调整来加快该过程。

如果您知道用户从哪里导航到需要这些资源的页面的源页面，那么您可以在之前的页面上使用rel="prefetch"。这将通知浏览器它必须提前开始下载这些资源（在后台以低优先级）并缓存它们以供将来使用。

因此，当用户尝试导航到需要这些资源的下一页时，部分或可能所有这些资源已经下载并缓存，并且在加载该页面时节省了一些时间。

如果使用得当，这种技术将有助于 Google 分析页面速度。