Question

将Google网络字体包含在网页中的首选方式是什么？

通过链接标记？

<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

Answer 1

对于90％以上的案例，您可能需要<link>标记。根据经验，您希望避免使用@import规则，因为它们会延迟加载包含的资源，直到获取文件为止。如果您有一个“展平”@ import的构建过程，那么您创建Web字体的另一个问题：像Google WebFonts这样的动态提供商提供平台特定版本的字体，因此如果您只是简单地内嵌内容，那么您最终会在某些平台上使用损坏的字体。

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

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

有关详细信息以及对Google网络字体的深入了解，请查看此GDL video

Answer 2

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

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

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

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

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

Answer 3

使用Google提供的<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">

Answer 4

您可以节省一些请求时间

...如果您需要一些额外的编码时间。

这没什么大不了的，只需打开Google的简化的单行链接即可：

   http://fonts.googleapis.com/css?family=Kameron:400,700

看看它能为您带来什么：

/* latin */
@font-face {
  font-family: 'Kameron';
  font-style: normal;
  font-weight: 400;
  src: local('Kameron'), url(https://fonts.gstatic.com/s/kameron/v8/vm82dR7vXErQxuzngLk6Lg.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;
}
/* latin */
@font-face {
  font-family: 'Kameron';
  font-style: normal;
  font-weight: 700;
  src: local('Kameron Bold'), local('Kameron-Bold'), url(https://fonts.gstatic.com/s/kameron/v8/vm8zdR7vXErQxuzniAIfO-rpfQ.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;
}

是的，这只是其他几个请求。直接从它们开始的速度更快-如果将字体文件下载到自己的服务器并在Google之前添加本地主机URL，则速度更快。我知道我知道，我们喜欢CDN和paralell请求，它们本来可以更快-但请自己尝试一下。

现在要回答最初的问题：不要@import，不要，只需将此代码直接放入现有的全局CSS 中，这对于您的服务器是最好的。它不需要加号请求，这不是一个单独的步骤-只是文件大小的很小的增加，几乎不会增加请求的处理时间。看起来会漂亮吗？不...但是您的网站希望收到的请求比修订的要多:)因此，请帮助服务器，而不是您自己。

总的来说，我认为值得付出更多的努力。

单行版本设计的效率不是，而是 simple -对于想要最简单方法的博客作者。你了解得更多。

Answer 5

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

包括Google Web Fonts链接还是导入？

5 个答案:

您可以节省一些请求时间