包括谷歌字体链接或导入?

在页面上包含谷歌字体的首选方式是什么?

  1. 通过<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">
  2. 通过样式表导入 
    @import url('https://fonts.googleapis.com/css2?family=Kameron:wght@400;700&display=swap');
  3. 使用Web字体加载器
125593 次浏览
小开
最佳答案

对于90%以上的情况，您可能需要<link>标记。根据经验，你应该避免使用@import规则，因为它们会延迟所包含资源的加载，直到获取文件。如果你有一个“扁平化”@import的构建过程，那么你就会对web字体产生另一个问题:像谷歌WebFonts这样的动态提供者提供特定平台版本的字体，所以如果你只是内联内容，那么你最终会在某些平台上使用坏字体。

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

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

欲了解更多信息，并深入了解谷歌Web字体，请查看此GDL视频

小开

使用谷歌提供的<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">
小开

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

小开

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

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

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

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

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

小开

谢谢你的精彩回答。我最近与React应用程序项目的经验也与公认的答案一致。如果你从CDN加载它，最好使用link。如果字体在您的本地目录中，那么使用import或link加载它将不会有太大的显著差异。但如果你使用第三方CDN加载它，那么使用link总是更好的。它更快，你将得到预加载和缓存支持。


提交答案