html - 我们如何在 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

对于 angular 中的这种实现，您应该使用第三方依赖项来加载字体。
使用 webfontloader

npm i webfontloader

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

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