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

供您参考：链接到 Harry Roberts 关于字体加载的说明

Answer 2

为每个字体文件包含多个预加载链接会使您的 html 文件变得臃肿并使其难以管理。

1. 您可以在 Angular 中创建一个服务来处理字体预加载。这将提供灵活性。

2。您还可以配置您的 angular.json 文件

"assets": [
    "src/favicon.ico",
    "src/assets",
    {
      "glob": "**/*",
      "input": "node_modules/@fortawesome/fontawesome-free/webfonts",
      "output": "/webfonts/"
    }
]

3. 如果您拥有的字体不是应用程序标准资产的一部分，您可以将服务用作

服务中.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class FontPreloadingService {
  preloadFonts(fontUrls: string[]) {
    fontUrls.forEach((url) => {
      const link = document.createElement('link');
      link.rel = 'preload';
      link.as = 'font';
      link.href = url;
      link.crossOrigin = 'anonymous';
      document.head.appendChild(link);
    });
  }
}

Preload the fonts in your component 

在app.ts中

import { Component, OnInit } from '@angular/core';
import { FontPreloadingService } from './font-preloading.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  constructor(private fontPreloadingService: FontPreloadingService) {}

  ngOnInit() {
    const fontUrls = [
      './assets/fonts/Lato/Lato-Semibold.woff2',
      './assets/fonts/Lato/Lato-Black.woff2',
      // Add other font URLs as needed
    ];

    this.fontPreloadingService.preloadFonts(fontUrls);
  }
}

Answer 3

对于 Angular 的实现，您应该使用第三方依赖项来加载字体。

使用网络字体加载器

npm 我网络字体加载器

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

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

Answer 4

对于角度中的此实现，您应该使用第三方依赖项来加载字体。，查找集中的、可信的内容，并围绕您最常使用的技术进行协作。，在结构化且易于操作的单个位置中连接和共享知识搜索。 之后加载您的自定义字体，如下所示

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