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

Posted 2023-02-19

【中文标题】我们如何在 Angular 中预加载字体？

【英文标题】：How can we preload fonts in Angular?

【发布时间】：2020-04-29 18:23:17

【问题描述】：

我们是否应该在 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>

【问题讨论】：

检查这些网址，您可能会得到帮助。 ***.com/questions/1330825/preloading-font-face-fonts***.com/questions/42616709/…

这能回答你的问题吗？ Preloading @font-face fonts?

您可以获得更接近标准 html 的内容：即使您使用的框架有自己定制的做事方式，也要这样做。因为除非那些定制的解决方案编译成“纯 HTML”，否则纯 HTML 解决方案总是最好的解决方案。

【参考方案1】：

预连接到字体文件源。 以低优先级异步预加载字体样式表。 异步在使用 javascript 呈现内容后加载字体样式表和字体文件。 为关闭 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

【参考方案2】：

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

使用webfontloader

npm i webfontloader

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

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

【参考方案3】：

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

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

【讨论】：

请阅读this article 以改进您的答案？

【参考方案4】：

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

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

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

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