为什么 Google Font 预连接到 fonts.googleapis.com

Question

我想将 Quicksand 字体添加到我的网站，因此 google 提示我添加以下内容：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=**Quicksand:wght@500**&display=swap" rel="stylesheet">

第一行代码（即预连接到 fonts.googleapis.com）会给我们带来什么好处？

我的意思是，我明白预连接到 fonts.gstatic.com 的意义，因为字体文件驻留在该域中。

Answer 1

所有主要浏览器（Google Chrome、Apple Safari、Microsoft Edge）都会在使用该字体的文本位置显示空白，直到该字体加载为止。

Mozilla Firefox 单独以默认字体显示文本，然后在加载后以该字体重新呈现文本。

rel="preconnect"因此，为了获得更好的用户体验，使用链接类型，以便在点击链接时可以更快地获取链接内容。

MDN 文档：

链接类型：预连接

元素的 rel 属性的 preconnect 关键字向浏览器暗示用户可能需要来自目标资源来源的资源，因此浏览器可以通过抢先启动到该来源的连接来改善用户体验。

不同浏览器使用网页字体的浏览器具体行为如下

Google Chrome
Chrome 浏览器会渲染页面的其余部分，但在加载字体之前，它会在使用该字体的文本位置显示一个空白区域。

Mozilla Firefox
Firefox 首先以默认字体显示文本，然后在加载后以该字体重新呈现文本。这种行为被称为“无样式文本的闪烁”。

Apple Safari
Safari 呈现页面的其余部分，但在加载字体之前，它会显示一个空白区域来代替使用该字体的文本。

Microsoft Internet Explorer
Internet Explorer 呈现页面的其余部分，但在加载字体之前，它会显示一个空白区域来代替使用该字体的文本。