所有主要浏览器（Google Chrome、Apple Safari、Microsoft Edge）在字体加载之前都会在使用该字体的文本位置显示空白。
单独的 Mozilla Firefox以默认字体显示文本，然后在加载后以该字体重新呈现文本。
因此，为了获得更好的用户体验，使用链接类型rel="preconnect"
，以便在点击链接时可以更快地获取链接内容。
链接类型：预连接不同浏览器与网络字体的浏览器特定行为谷歌浏览器rel 属性的 preconnect 关键字 该元素向浏览器提示用户可能会 需要来自目标资源来源的资源，因此 浏览器可以通过先发制人的方式改善用户体验 启动与该源的连接。
Chrome 渲染页面的其余部分，但直到 字体已加载，它会在文本位置显示一个空格 使用该字体。Firefox 首先以默认字体显示文本， 然后在加载后重新渲染字体中的文本。这种行为 被称为“无样式文本的闪光。”
Mozilla 火狐Safari 渲染页面的其余部分，但直到字体 已加载，它会显示一个空格来代替使用的文本 字体。
苹果SafariInternet Explorer 呈现其余部分 页面，但在字体加载之前，它会在 使用该字体的文本的位置。
微软 Internet Explorer
首先注意 HTML 是按顺序解析的。当浏览器遇到引用外部资源（例如 CSS 文件、JavaScript 文件和图像）的元素时，它会发起获取这些资源的请求，通常是异步执行的，以避免阻塞剩余 HTML 的解析。当浏览器解析 HTML 时，它会创建一个需要获取和处理的资源列表。该列表通常称为“资源队列”。浏览器使用不同的启发式方法对资源队列中的资源进行优先级排序，为更高优先级的资源分配更多的带宽和处理能力。
预连接到 fonts.googleapis.com 最初似乎只提供了最小的节省时间的好处，因为实际的 CSS 请求紧随其后。然而，谷歌包含预连接提示仍然有意义，因为谷歌无法预测每个使用其字体的网站中元素的确切结构。
如果与字体相关的元素出现在头部末尾，则浏览器可能已经优先加载其他资源，可能是针对缓慢或不可靠的网络连接。通过包含预连接提示，您可以向浏览器提供有关与特定域建立连接的重要性的附加信息。这可以帮助浏览器优先考虑连接建立过程，确保它尽早发生，即使在预连接提示之后不久就出现了对资源的实际请求（按代码方式）。
此外，在开发网站的过程中，开发人员可能会无意中在预连接和 CSS 请求之间添加更多代码行，例如 JavaScript 或来自其他域的字体。这可能会增加预连接提示和实际 CSS 请求之间的距离。在这种情况下，根据网络条件和浏览器的资源优先级，使用预连接的节省时间的好处可能会变得更加显着。