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

Question

我正在尝试使用Google灯塔优化我的网页。

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

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

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

我也尝试过使用字体作为预加载。类型为woff，woff2和ttf。他们似乎都不起作用。我还添加了crossorigin和crossorigin =“ anonymous”，但仍然没有进展。

这些是我实际的链接。我想同时导入它们。

<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

这对我有用：

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

Answer 2

我希望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>

（对于不支持的预加载来说，这似乎是一种很好的后备机制，因此无论如何都很好）。

此外，为了摆脱图标名称的“闪烁”，我使用代码点[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 3

<link rel="preload" href="https://fonts.gstatic.com/s/materialicons/v41/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf" as="font" type="font/ttf" crossorigin="anonymous">

<style>
  @font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
  }
  .material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
  }

</style>

Answer 4

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

font-display: block;

所以像这样使用它：

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