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

Question

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

kaj*_*ajo 168 fonts webfonts google-webfonts

将Google Web Fonts包含在页面中的首选方法是什么？

通过链接标签？

<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

igr*_*rik 263

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

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

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

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

此信息应位于Google Web Fonts页面上.它只是向您提供了三个选项 - 并没有提供任何有用的提示,关于使用哪个以及何时使用. (11认同)
谷歌自己的'[入门](https://developers.google.com/fonts/docs/getting_started?hl=en)'教程只使用`<link>`方法,所以我想这是他们推荐的方法.不言而喻的时尚 (3认同)
您可能还想将 `rel="preload"` 添加到 `<link>` 标记，因为这样字体将在文本出现之前加载。请参阅 https://3perf.com/blog/link-rels/ (3认同)
Web Fonts API 在处理 HTML5 Canvas 时非常有用。您不能使用在绘制文本之前尚未完成加载的字体，当然，一旦加载了字体，它就不会自动更新。相关地，需要 API 来跟踪加载资产的进度，例如在游戏中。 (2认同)

Answer 2

Che*_*rik 12

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 3

Jfl*_*fly 9

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

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

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

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

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

Answer 4

Mar*_*nti 6

使用<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">

Run Code Online (Sandbox Code Playgroud)

@BadHorsie 这就是它的全部意义。fonts.googleapis.com 上的样式表有一个指向 fonts.gstatic.com 上资源的链接。您告诉浏览器启动与后一个主机的连接，以便在它在样式表中找到链接时已经连接或开始连接。 (3认同)

归档时间：	13 年，3 月前
查看次数：	71996 次
最近记录：	6 年前