wil*_*air 5 html javascript css lighthouse reactjs
灯塔审计建议我预载关键请求，特别是我在React应用程序中使用的两种Google字体。灯塔成员建议使用：
<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已使用链接预加载进行了预加载，但在窗口加载事件发生后的几秒钟内未使用。请确保它具有适当的值，并有意预加载。”
不幸的是，这两种字体不再显示在我的应用程序中。我是否需要在CSS中使用@ font-face或类似的东西定义这些？
Ang*_*ris 29
预加载字体的正确方法是同时添加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 更像是一种告诉浏览器可能需要资源的方法，以便无论如何都会请求它，然后，如果您需要它或决定使用它，您可以。
Mic*_*rty 17
建议先预连接，然后预加载，最后加载如下：
<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。在连续的字体之间放置管道|符号。
| 归档时间： |
|
| 查看次数： |
3253 次 |
| 最近记录： |