包括谷歌字体链接或导入？答案

【问题标题】：Including Google Fonts link or import?包括谷歌字体链接或导入？
【发布时间】：2012-09-01 05:49:23
【问题描述】：

在页面上包含 Google 字体的首选方式是什么？

通过<link> 标签

<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=Judson:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">

通过样式表中的导入

@import url('https://fonts.googleapis.com/css2?family=Kameron:wght@400;700&display=swap');

使用Web Font Loader

【问题讨论】：

在使用谷歌字体之前，您可能还想阅读this question。取决于具体的项目——它可能并不总是明智的选择。
@ObmerkKronen 获取链接
为什么我们需要预连接链接？我在没有预连接链接的情况下尝试了这个，效果很好

标签： fonts webfonts google-webfonts

【解决方案1】：

对于 90% 以上的情况，您可能需要<link> 标签。根据经验，您要避免使用@import 规则，因为它们会延迟加载包含的资源，直到获取文件为止。如果您有一个“扁平化”@import 的构建过程，那么您会产生另一个问题使用网络字体：Google WebFonts 等动态提供程序提供特定于平台的字体版本，因此如果您只是内联内容，那么您最终会在某些平台上使用损坏的字体。

现在，您为什么要使用网络字体加载器？如果您需要完全控制字体的加载方式。大多数浏览器会将内容绘制到屏幕上，直到下载并应用所有 CSS - 这避免了“无样式内容的闪烁”问题。缺点是……在内容可见之前，您可能会有额外的暂停和延迟。使用 JS 加载器，您可以定义字体可见的方式和时间。例如，您甚至可以在将原始内容绘制到屏幕上后淡入它们。

再一次，90% 的情况是 <link> 标签：使用好的 CDN，字体会很快下降，甚至更有可能从缓存中取出。

如需了解更多信息并深入了解 Google 网络字体，请查看GDL video

【讨论】：

“因为他们推迟加载包含的资源，直到获取文件”——这不是使用 @import 的好理由吗？因为通常在字体加载之前你不想看到内容（以避免字体闪烁）
Web Fonts API 在使用 HTML5 Canvas 时非常有用。在使用它绘制文本之前，您不能使用尚未完成加载的字体，当然，一旦加载了字体，它就不会自动更新。相关地，需要 API 来跟踪加载资产的进度，例如在游戏中。
此信息应该在 Google Web Fonts 页面上。它只是向您展示了三个选项 - 并没有提供任何有用的提示来说明使用哪一个以及何时使用。
Google 自己的 'Getting Started' 教程只使用了 <link> 方法，所以我猜这是他们以一种不言而喻的方式推荐的方法
您可能还想将rel="preload" 添加到<link> 标记中，因为这样字体将在文本出现之前加载。见3perf.com/blog/link-rels

【解决方案2】：

使用谷歌提供的<link>，因为字体有版本控制，但在它上面使用 HTML5 的预连接功能要求浏览器打开 TCP 连接并提前与 fonts.gstatic.com 协商 SSL。这是一个示例，它显然需要驻留在您的 <head></head> 标记中：

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

【讨论】：

预连接与您示例中的样式表链接是完全不同的域是否正确？ fonts.gstatic.com 与 fonts.googleapis.com
@BadHorsie 这就是重点。 fonts.googleapis.com 上的样式表有一个指向 fonts.gstatic.com 上资源的链接。您是在告诉浏览器启动与后一个主机的连接，以便在它在样式表中找到链接时已经连接或开始连接。

【解决方案3】：

如果您关心 SEO（搜索引擎优化）和性能，最好使用 <link> 标签，因为它可以预加载字体。

例子：

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2" as="font" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2" as="font" crossorigin>
<style>
@font-face {
 font-family: 'Lato';
 font-style: normal;
 font-weight: 400;
 src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
 font-family: 'Quicksand';
 font-style: normal;
 font-weight: 400;
 src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>

有关更多信息，请阅读以下内容： https://ashton.codes/preload-google-fonts-using-resource-hints/

【讨论】：

【解决方案4】：

我了解其他答案的建议是在 html 文件中使用 <link>。

我最近意识到有一个用例可以让我在 css 文件中使用 @import。

原因很简单：我正在为我的业余项目制作静态网站，我更看重便捷方式而不是 SEO 或与稀有平台的兼容性等。

在 css 文件中使用 @import 的好处是，如果我想更改字体，我需要做的就是在 css 文件中修改几行。就这样，故事结束。如果我在html文件中使用<link>，除了更改css文件中的字体外，我还要更新和上传所有html文件，有点不方便。

长话短说：@import 在 css 文件中是自包含的，所以更新方便。它对于测试和尝试不同的字体特别有用。

【讨论】：