1

我正在使用应用程序font-awesome中的图标angular。我检查了我的网络结果pagespeed。我遇到了字体问题。

这是pagespeed结果。

在此处输入图像描述

它所说的用途<link rel=preload>，但问题是它..fonts/fontawesome-webfont.woff?v=4.7.0在FontAwesome's css文件中可用，那么我该如何为此添加预加载？或者有什么解决方案可以解决吗？

这是我的 index.html，我在其中包含font-awesome了 CDN。

<link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" crossorigin />

我认为这是css.

@font-face {
    font-family: 'FontAwesome';
    src: url('/assets/fonts/fontawesome-webfont.eot?v=4.7.0');
    src: url('/assets/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('/assets/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('/assets/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('/assets/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
4

2 回答 2

4

有 3 种方法可以做到这一点。

  1. 在本地使用它。你知道其余的。

  2. 告诉浏览器“我很快就会调用这些文件，做好准备。”

使用preconnect. （https://developers.google.com/web/fundamentals/performance/resource-prioritization?hl=en#preconnect）

确保您使用as="font".

<link rel="preconnect" as="font"
href="https//maxcdn.bootstrapcdn.com/assets/fonts/fontawesome-webfont.eot?v=4.7.0" type="font/eot"
crossorigin />

  1. 告诉浏览器“我希望你尽快获取它们”。

    <link rel="preload" as="font" href="https//maxcdn.bootstrapcdn.com/assets/fonts/fontawesome-webfont.eot?v=4.7.0" type="font/eot" crossorigin="anonymous">

对于第 2 点和第 3 点，为 woff 和 woff2 复制相同的内容。在 type 中声明正确的 mime 类型。

于 2019-10-23T11:16:03.753 回答
-2

如果您使用 WordPress 平台并遇到此问题，请查看本文以修复预加载密钥请求 只需使用 WordPress 插件将预加载密钥添加到称为“资产清理”的字体安装插件到setting->Local Fonts-> Add URL那里，它将被修复. 有关更多信息，请访问以下参考网址 http://freelancersiddheshlad.com/fix-preload-key-requests-with-fonts-in-wordpress/

于 2020-07-08T21:20:21.883 回答