Question

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是使用链接预加载预加载的，但是在窗口加载事件后的几秒钟内没有使用。请确保它具有适当的值，并且是故意预加载的。”

不幸的是，这两种字体不再显示在我的应用中了。我需要在我的CSS中使用@ font-face或类似的东西来定义这些吗？

Answer 1

建议先连接，然后预加载，然后最终加载，如下所示：

<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
<link rel='preload' as='style' href='https://fonts.googleapis.com/css?family=Open+Sans|Roboto:wght@300&display=swap'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans|Roboto:wght@700&display=swap'>

您不仅可以预连接和/或预加载，还需要照常加载。另外，您只需指定不是给定字体默认值的任何字体粗细。我今天继续，他们展示了我尝试过的：wght @ 700，它可以工作。机会是：700仍然可以使用。另外，他们让我们在连续字体之间放置＆family =，但是我无法使它正常工作，所以我坚持使用管道|签名。

Answer 2

正确加载字体的正确方法是同时添加一个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更像是一种告诉浏览器可能需要资源的方法，因此无论是否需要它，或者如果您需要或决定使用它，都可以请求它。

更多信息

预加载Google字体

2 个答案: