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

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

使用 WebFontLoader

npm i webfontloader

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

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

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 关于字体加载的解释

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

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

为每个字体文件包含多个预加载链接可能会使您的 html 文件膨胀并使其更难管理。

1. 您可以在 angular 中创建服务来处理字体预加载。这将允许灵活性。

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

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

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

在 service.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);
  }
}