我正在尝试使用谷歌灯塔优化我的网页。
该报告指出，在导入 Material Design 图标的链接上使用 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>
应该如何使用这些带有预加载的链接？
我希望 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/ https://google.github.io/material-design-icons/
[2] - https://csswizardry.com/2020/05/the-fastest-google-fonts/ https://csswizardry.com/2020/05/the-fastest-google-fonts/
[3] - https://github.com/google/material-design-icons/blob/master/iconfont/codepoints https://github.com/google/material-design-icons/blob/master/iconfont/codepoints
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
