在页面上包含谷歌字体的首选方式是什么?
通过<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"> 通过样式表中的导入 @ import url (https://fonts.googleapis.com/css2?family=Kameron: wght@400; 700份=交换'); 使用Web字体加载器
当前回答
如果你关心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/
其他回答
如果你关心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/
使用谷歌提供的<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">
我理解其他答案的建议是在html文件中使用<link>。
我最近意识到有一个用例让我在css文件中使用@import。
原因很简单:我正在为我的业余项目制作静态网站，我看重的是便利性，而不是SEO或与稀有平台的兼容性等。
在css文件中使用@import的好处是，如果我想改变字体，我所需要做的就是修改css文件中的几行。就这样，故事结束了。如果我在html文件中使用<link>，除了改变css文件中的字体外，我还需要更新和上传所有的html文件，这有点不方便。
长话短说:@import在css文件中是自包含的，因此便于更新。它对于测试和尝试不同的字体特别有用。
对于90%以上的情况，您可能需要<link>标记。根据经验，您应该避免使用@import规则，因为它们会延迟所包含资源的加载，直到获取文件。如果你有一个“扁平化”@import的构建过程，那么你就会对web字体产生另一个问题:像谷歌WebFonts这样的动态提供者提供特定平台版本的字体，所以如果你只是内联内容，那么你最终会在某些平台上使用坏字体。
Now, why would you use the web font loader? If you need complete control over how the fonts are loaded. Most browsers will defer painting the content to the screen until all of the CSS is downloaded and applied - this avoids the "flash of unstyled content" problem. The downside is.. you may have an extra pause and delay until the content is visible. With the JS loader, you can define how and when the fonts become visible.. for example, you can even fade them in after the original content is painted on the screen.
同样，90%的情况是<link>标签:使用一个好的CDN，字体将很快下降，甚至更有可能从缓存中提供。
要了解更多信息，并深入了解谷歌Web字体，请查看这段GDL视频
谢谢你的精彩回答。我最近与React应用程序项目的经验也与公认的答案一致。如果你从CDN上下载，最好使用链接。如果字体在您的本地目录中，那么使用import或link加载它将不会有太大的显著差异。但如果你使用第三方CDN加载它，那么使用链接总是更好的。它更快，你将得到预加载和缓存支持。
