如何使用rel=preload预加载材质图标？

Question

我正在试着用谷歌灯塔优化我的网页。

该报告指出，在导入材料设计图标的链接上使用rel=preloads。

我已经尝试使用语法预加载它们。

<link rel="preload" href="" as="style" crossorigin>

我也试着使用as font进行预加载。类型为woff、woff2和ttf。它们似乎都不起作用。我还添加了crossorigin和crossorigin=“匿名”，但仍然没有进展。

​

​

这些是我的实际链接。我想把这两个都导入。

<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" as="style">
<link rel="preload" href="https://fonts.googleapis.com/icon?family=Material+Icons" as="font" type="font/woff" crossorigin>

如何在预加载中使用这些链接？

Answer 1

我希望Google在它的字体指南中准备好预加载信息，但只有正常的CSS示例1。

无论如何，我通过添加以下内容修改了解决方案：

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons&amp;display=swap" media="print" onload="this.media='all'" crossorigin>

(对于不支持的预加载，这似乎是一个很好的后备机制，所以不管怎样，有了它还是很好的)。

此外，为了去掉图标名称的"blink“，我使用了代码点3。如下所示：

<i class="material-icons">&#xE87C;</i> (代替<i class="material-icons">face</i>)。

这样，在加载字体的过程中，我得到了几乎看不见的符号--而不是完整的"face“。

1- https://google.github.io/material-design-icons/

2- https://csswizardry.com/2020/05/the-fastest-google-fonts/

3- https://github.com/google/material-design-icons/blob/master/iconfont/codepoints

Answer 2

这对我很有效：

<link 
  rel="preload"
  as="style" onload="this.rel = 'stylesheet'"
  href="https://fonts.googleapis.com/icon?family=Material+Icons">

Answer 3

我注意到谷歌字体在获取url时会在链接末尾放置一个&display=swap。因此，当我们将其更改为display=block时，它会在服务器端的css文件中进行更改：

font-display: block;

所以像这样使用它：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">