包括Google字体的链接或导入吗？

Question

包括Google字体的链接或导入吗？

290

什么是在页面中包含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

- kajo

9

在使用 Google 字体之前，您可能还想阅读这个问题，因为根据具体项目的不同，它可能并不总是明智的选择。 - Obmerk Kronen

@ObmerkKronen 的链接。 - mercury

为什么我们需要预连接链接？我尝试过没有预连接链接，它也可以正常工作。 - enigma6174

6个回答

18

如果您关心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/

- Cherik

8

使用谷歌提供的<link>，因为字体有版本控制，但是在它上面使用HTML5的preconnect功能，要求浏览器提前打开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">

- Mark Cilia Vincenti

在你的例子中，预连接（preconnect）和样式表链接是否属于完全不同的域名？fonts.gstatic.com与fonts.googleapis.com。 - BadHorsie

3

@BadHorsie 这就是它的全部意义。fonts.googleapis.com上的样式表链接到了fonts.gstatic.com上的资源。你在告诉浏览器去初始化一个与后者主机的连接，这样它会在找到样式表中的链接之前已经连接或开始连接了。 - Mark Cilia Vincenti

8

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

最近我意识到我需要在css文件内部使用@import。

原因很简单：我正在为我的副业项目制作静态网站，我更注重方便性而不是SEO或兼容性等问题。

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

总之，@import在css文件内部自成一体，因此非常方便更新。特别适用于测试和尝试不同的字体。

- Feng Jiang

0

感谢所有的好答案。我最近使用React应用程序项目的经验也与被接受的答案相符。如果您从CDN加载它，最好使用link。如果字体在您的本地目录中，则使用import或link加载它不会有太大的显着差异。但是，如果您使用第三方CDN加载它，则始终最好使用link。它更快，而且您将获得预加载和缓存支持。

- moshfiqrony

0

我个人更喜欢使用<link>。

这是我上传字体的方法：

<link href="https://fonts.googleapis.com/css2?family=Judson:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">

- Nightwaves

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- igrigorik · Accepted Answer

对于90%以上的情况，你可能需要使用<link>标签。作为一个经验法则，你应该避免使用@import规则，因为它们会将包含资源的加载推迟到文件被获取之后。如果你有一个“扁平化”@import的构建过程，那么你会在Web字体方面创建另一个问题：像Google WebFonts这样的动态提供程序会提供特定于平台的字体版本，因此如果你只是内联内容，那么你在某些平台上会遇到破损的字体。

那么，为什么要使用Web字体加载器呢？如果你需要完全控制字体的加载方式。大多数浏览器会推迟绘制内容到屏幕上，直到所有CSS都被下载和应用，这可以避免“未经样式修饰的内容闪现”的问题。缺点是..你可能会有额外的暂停和延迟，直到内容可见。通过JS加载器，你可以定义字体何时以及如何变得可见..例如，在原始内容绘制在屏幕上之后，你甚至可以淡入它们。

再次强调，90%的情况是使用<link>标签：使用一个好的CDN，字体将快速下载甚至更有可能从缓存中提供。

有关更多信息以及对Google Web字体的深入了解，请查看这个 GDL视频。