如何使用rel=preload预加载Material Icons？

Question

我正在尝试使用Google Lighthouse来优化我的网页。

报告建议在导入Material Design Icons的链接上使用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>

如何在预加载的情况下使用这些链接？

- GreedyAi

---

你看过 https://developers.google.com/web/tools/lighthouse/audits/noopener 吗？ - Ronnie Oosting

是的，但我不明白它与预加载有什么关系。 - GreedyAi

我遇到了同样的问题，你找到解决方法了吗？ - Felix Lemke

暂时还没有。我先放一段时间，如果有发现什么再更新。 - GreedyAi

这是我在这个主题上发现的非常有用的文章：https://ashton.codes/preload-google-fonts-using-resource-hints/。希望它能帮助其他想深入了解的人。 - Krishnan

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> （这似乎是不支持预加载的良好回退机制，因此无论如何都很好）。

另外，为了消除图标名称的“闪烁”，我使用编码点[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

- szymond

Answer 2

这对我有用：

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

- kundan

---

这很聪明，但我认为除非别无选择，否则我不会推荐使用这种方法。 - GreatBlakes

@GreatBlakes 为什么不推荐使用呢？您能在评论中详细说明一下吗？这是目前唯一有效的方法... - Wilt

内嵌的 onload 属性 JS 将其转换为样式表链接，这似乎有点 hacky，在较大的项目中可能会令人困惑和难以排查。如果这是你发现的唯一可行方法，请继续使用 - 我只是建议尽可能多地记录它，以便您的合作者（或将来的自己）可以在以后进行调试而不感到困惑。 - GreatBlakes

Answer 3

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

font-display: block;

像这样使用它：

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

- Ambrus Tóth

Answer 4

可以通过在应用程序的入口页面放置一个透明的图标来预加载图标。如果入口页面不包含需要显示的其他图标，这种方法效果很好。

index.html:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" />  
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />

home.component.ts:

<span class="material-symbols-outlined transparent">home</span>
<span class="material-icons-outlined transparent">edit</span>

home.component.scss:

.transparent {
    color: transparent;
}

- Martin Staufcik

Answer 5

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

- CESCO

---

不确定为什么这个答案被踩了。看起来只是在@font-face定义中缺少了src属性，例如src: url(https://fonts.gstatic.com/s/materialicons/v41/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf)，但除此之外，这就是你想要下载“字体”文件的方式。预加载CSS并不能真正帮助解决Lighthouse警告，直到你也预加载字体文件。 - Krishnan