预加载 Google 字体答案

【问题标题】：Preloading Google Fonts预加载 Google 字体
【发布时间】：2018-11-22 06:22:11
【问题描述】：

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 中定义这些吗？

【问题讨论】：

我看不到您的代码，但我猜您将<link rel="stylesheet">替换为<link rel="preload">。这还不够。 preload 和 stylesheet 两者都需要。
这样吗？ fonts.googleapis.com/css?family=Open+Sans|Roboto:700" crossorigin>
还没有。您不应该将这些标签合并为一个，而是保留两者。最终，每种字体都会有两个 <link> 标记。一个preload，一个stylesheet。
这有效：fonts.gstatic.com" crossorigin> fonts.googleapis.com/css?family=Roboto:700" crossorigin> fonts.googleapis.com/css?family=Open+Sans" crossorigin> fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" crossorigin> fonts.googleapis.com/css?family=Roboto:700" rel="stylesheet" crossorigin >
在不添加 crossorgin 属性的情况下，我收到了来自 LightHouse 的渲染阻止样式表警告，但是，按照 Chrome 的建议预加载字体的整个努力将我的第一个有意义的绘制从 2650 毫秒提高到 3620 毫秒，并降低了我的灯塔分数88 到 79。

标签： javascript html css reactjs lighthouse

【解决方案1】：

预加载字体的正确方法是同时添加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 更多的是告诉浏览器可能需要某个资源，以便无论如何都会请求它，然后，如果您需要它或决定使用它，您可以。

更多信息

【讨论】：

我想你的意思是说预加载as="font"
@monchisan 不，as="style" 属性是正确的。 Google 正在提供一个包含 @font-face 声明的 CSS。
@Angelos Chalaris 我认为它只预加载 CSS 而不是字体
preload 不需要crossorigin？感谢您的帮助！

【解决方案2】：

建议先预连接，再预加载，最后加载如下：

<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 指定任何不是该给定字体的默认字体粗细，例如。在连续字体之间，您放置管道 | 符号。

【讨论】：

有用资源：cdnplanet.com/blog/faster-google-webfonts-preconnect
最完整的评论。我注意到 Google 最近更改了将 css 替换为 css2 的 URL。
预加载不需要crossorigin，只需要预连接？
是的，Crashalot 你确实需要跨域，它已经在我的第一行代码中。