包括 Google 字体链接或导入？

问题描述 投票：0回答：6
fonts webfonts google-webfonts
6个回答
425
投票

对于 90% 以上的情况，您可能需要 

<link>
标签。根据经验，您希望避免 
@import
规则，因为它们会推迟所包含资源的加载，直到获取文件为止。如果您有一个“扁平化”@import 的构建过程，那么您会产生另一个问题使用网络字体：像 Google WebFonts 这样的动态提供程序提供特定于平台的字体版本，因此如果您只是内联内容，那么您最终会在某些平台上看到损坏的字体。

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

再次强调，90% 的情况是 

<link>
标签：使用良好的 CDN，字体会快速下载，甚至更有可能从缓存中提供。

如需了解更多信息并深入了解 Google Web Fonts，请观看此 GDL 视频

17
投票

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

8
投票

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

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

<link>
。

我最近意识到我可以在 css 文件中使用 

@import
的用例。

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

在css文件中使用

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

长话短说：

@import
独立于css文件内，方便更新。它对于测试和尝试不同的字体特别有用。

0
投票

感谢所有精彩的回答。我最近在 React 应用程序项目中的经验也与公认的答案一致。如果您从 

CDN
加载，最好使用 link。如果字体位于您的本地目录中，那么使用 
import
或 
link
加载它不会有太大的显着差异。但如果您使用第三方 CDN 加载它，那么最好使用 
link
。它更快，您将获得预加载和缓存支持。

0
投票

我个人更喜欢

<link>
。

这就是我上传字体的方式：

<link href="https://fonts.googleapis.com/css2?family=Judson:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.