Light House 审计建议我预加载关键请求，特别是我在 React 应用程序中使用的两种谷歌字体。灯塔成员建议使用：
<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是使用链接预加载预加载的，但在窗口加载事件的几秒钟内未使用。请确保它具有适当的作为值，它是有意预加载的。”
不幸的是，这两种字体不再显示在我的应用程序中。我是否需要使用 @font-face 或类似的东西在我的 CSS 中定义这些？
预加载字体的正确方法是同时添加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 更像是一种告诉浏览器可能需要资源的方法，以便无论如何都会请求它，然后，如果你需要它或决定使用它，你可以。
建议你先预连接，然后预加载，最后加载如下：
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
<link rel='preload' as='style' href='https://fonts.googleapis.com/css2?family=Open+Sans|Roboto:wght@300&display=swap'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Open+Sans|Roboto:wght@700&display=swap'>
您不能只是预连接和/或预加载，您仍然需要像往常一样加载。然后，例如，您只需使用 指定不是该给定字体默认值的任何字体粗细:wght@700。在连续的字体之间放置管道|符号。