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已使用链接预加载进行预加载，但在窗口加载事件后的几秒钟内未使用。请确保它具有适当的 as值，并且是有意预加载的。”
不幸的是，这两种字体不再显示在我的应用程序中。我需要用@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例如，使用 . 在连续字体之间放置管道|符号。
谷歌总是提供来自同一个域的字体fonts.gstatic.com
所以在添加样式之前预加载它。
<link rel="preconnect" href="https://fonts.gstatic.com/">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:700">