包括Google Web字体链接还是导入？

188

将Google Web字体包含到页面中的首选方式是什么？

通过链接标签？

<link href ='http：//fonts.googleapis.com/css？family = Judson：400,400italic，700'rel ='stylesheet'type ='text / css'>

通过在样式表中导入？

@import url（http://fonts.googleapis.com/css?family=Kameron:400,700）;

或使用网络字体加载器

https://developers.google.com/webfonts/docs/webfont_loader

fonts webfonts google-webfonts

— jo
source

您可能还想在完全使用Google字体之前阅读此问题。取决于特定的项目-可能并不总是明智的选择。

— Obmerk Kronen

Answers:

284

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

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

再次，90％的情况是<link>标记：使用良好的CDN，字体将快速下降，甚至更有可能从缓存中提供。

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

— 伊格里哥里克
source

“因为它们将加载包含的资源的时间推迟到提取文件之前”，这不是使用@import的好理由吗？因为通常在加载字体之前，您不希望看到内容（以避免字体闪烁）

— Alex

使用HTML5 Canvas时，Web字体API非常有用。您不能使用尚未用字体绘制文本的字体来加载文本，当然，一旦加载字体，它就不会自动更新。相关地，例如在游戏中需要API来跟踪加载资产的进度。

— rvighne 2014年

此信息应该在Google Web字体页面上。它仅向您提供三个选项-并没有提供有关使用哪个以及何时使用的任何有用提示。

— 2015年

Google自己的“ 入门 ”教程仅使用该<link>方法，所以我想这是他们以不言而喻的方式推荐的方法

— James Cushing 2015年

您可能也想添加rel="preload"到<link>标签中，因为这样一来，字体将在文本出现之前加载。参见3perf.com/blog/link-rels

— Elijah Mock

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

— 龙虾
source

请使用<link>Google提供的，因为该字体上有版本控制，但在其上方，它使用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">

— 马克·西利亚·文森蒂
source

预连接与示例中的样式表链接完全不同的域是否正确？fonts.gstatic.com对比fonts.googleapis.com

— BadHorsie

@BadHorsie这就是重点。fonts.googleapis.com上的样式表具有指向fonts.gstatic.com上资源的链接。您是在告诉浏览器启动与后一个主机的连接，以便浏览器在样式表中找到链接时已经连接或开始连接。

— Mark Cilia Vincenti