我正在尝试使用 google lighthouse 优化我的网页。
报告说在导入 Material Design 图标的链接上使用 rel=preloads。
我尝试使用语法预加载它们。
<link rel="preload" href="" as="style" crossorigin>
我也尝试使用 as 字体预加载。类型为 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>
应该如何使用带有预加载的这些链接？
最佳答案
我希望 Google 在它的字体指南中准备好预加载信息，但只有普通的 CSS 示例 [1]。
无论如何，我通过添加破解了解决方案:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons&display=swap" media="print" onload="this.media='all'" crossorigin>
(对于不支持的预加载，这似乎是一个很好的回退机制，所以无论如何都有它很好)。
此外，为了摆脱图标名称的“闪烁”，我使用代码点 [3]。像那样:
<i class="material-icons"></i> (而不是 <i class="material-icons">face</i> )。
这样，在字体加载期间，我得到几乎看不见的符号，如 □，而不是完整的“脸”。
[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
关于html - 如何使用 rel=preload 预加载素材图标？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51874007/