Javascript 在angular 7中使用自定义字体文件时，如何减少初始加载时间？

我将本地字体文件保存在assets/fonts文件夹中。我总共使用了3种字体（lato、raleway、Glyph）

在“head”标记下的index.html中，我写了如下内容：

<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>

    <link rel="preload" href="./assets/fonts/Raleway/Raleway-Black.woff2" as="font" crossorigin>
    <link rel="preload" href="./assets/fonts/Raleway/Raleway-Bold.woff2" as="font" crossorigin>
    <link rel="preload" href="./assets/fonts/Raleway/Raleway-ExtraBold.woff2" as="font" crossorigin>
    <link rel="preload" href="./assets/fonts/Raleway/Raleway-Medium.woff2" as="font" crossorigin>
    <link rel="preload" href="./assets/fonts/Raleway/Raleway-MediumItalic.woff2" as="font" crossorigin>
    <link rel="preload" href="./assets/fonts/Raleway/Raleway-Regular.woff2" as="font" crossorigin>
    <link rel="preload" href="./assets/fonts/Raleway/Raleway-SemiBold.woff2" as="font" crossorigin>

    <link rel="preload" href="./assets/fonts/glyphicons-halflings-regular.ttf" as="font" crossorigin>

@font-face {
  font-family: "Lato-Medium";
  src: url("/assets/fonts/Lato/Lato-Medium.woff2") format('woff2');
}

@font-face {
  font-family: "Lato-Regular";
  src: url("/assets/fonts/Lato/Lato-Regular.woff2") format('woff2');
}

我使用gzip压缩并实现了PWA。 报告显示，在使用“ng build--prod”构建和部署应用程序并在“chrome lighthouse”中检查性能后，预加载密钥请求需要花费大量时间。如何减少这一时间？有解决办法吗

---

因为您已经像这样在scss文件中包含了字体

src: url("/assets/fonts/Lato/Lato-Medium.woff2") format('woff2');

因此，您只需将所需字体添加到scss文件中，然后将其从index.html中删除即可

同时将字体添加到ngsw-config.json以缓存它

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/assets/favicon.ico",
          "/*.css",
          "/*.js",
        ],
        "urls": [
          "https://fonts.googleapis.com/css?family=Raleway" // add your font here
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/images/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}