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

- ABHILASH SB

---

请查看以下网址，或许可以帮到您。 https://dev59.com/o3M_5IYBdhLWcg3wjj0p https://dev59.com/2lgQ5IYBdhLWcg3wikaT - Piyush Jain

这个回答解决了你的问题吗？预加载@font-face字体？ - Hossein Mousavi

尽可能接近标准HTML的解决方案是最好的，即使您使用的框架有自己独特的解决方案。因为除非这些独特的解决方案编译成“纯HTML”，否则纯HTML解决方案始终是最佳解决方案。 - Mike 'Pomax' Kamermans

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

- Pushpinder Singh

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. 如果您所拥有的字体不是应用程序标准资源的一部分，您可以使用一个服务。在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);
  }
}

- Somil Dubey

Answer 3

在 Angular 中实现时，您应该使用第三方依赖项来加载字体。

使用 webfontloader

npm i webfontloader

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

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

- Raheem Mohamed

Answer 4

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

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

- Mahima Sachdeva

---

请阅读这篇文章以提高您的回答质量。 - Sercan Sebetçi