Light House 审核建议我预加载关键请求，特别是我在 React 应用程序中使用的两种谷歌字体。 Light House 成员建议使用:
<link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:700" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
我知道它正在发出请求，因为我在瀑布中看到它并且我收到了这个控制台警告:
“资源 https://fonts.googleapis.com/css?family=Open+Sans|Roboto:700 是使用链接预加载预加载的，但在窗口加载事件后的几秒钟内未使用。请确保它具有适当的 as 值并且是有意预加载的。”
不幸的是，这两种字体不再显示在我的应用程序中。我是否需要在我的 CSS 中使用 @font-face 或类似的东西来定义它们？
最佳答案
预加载字体的正确方法是同时添加 preload 链接和 stylesheet。一个基于 MDN 的简化示例如下:
<head>
<meta charset="utf-8">
<title>Preloading fonts</title>
<link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto&display=swap" as="style">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=swap">
</head>
<body>
</body>
在上面的例子中，preload链接会发送一个请求来获取字体，不管客户端是否安装了字体，然后使用stylesheet链接来正确加载和使用它。
preload 更像是一种告诉浏览器可能需要某个资源的方式，因此无论如何都会请求它，然后，如果您需要它或决定使用它，您可以.
关于javascript - 预加载谷歌字体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50824181/