本文介绍了包括 Google 字体链接或导入?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

  1. 通过 标签

    <link rel="预连接";href=https://fonts.gstatic.com"交叉起源><link href="https://fonts.googleapis.com/css2?family=Judson:ital,wght@0,400;0,700;1,400&display=swap";rel=样式表">

  2. 通过样式表中的导入

    @import url('https://fonts.googleapis.com/css2?family=Kameron:wght@400;700&display=swap');

  3. 使用网络字体加载器
解决方案

对于 90% 以上的情况,您可能需要 标签.根据经验,您希望避免 @import 规则,因为它们会将包含的资源的加载推迟到文件被提取之前.,那么您会为网络字体带来另一个问题:像 Google WebFonts 这样的动态提供程序提供特定于平台的字体版本,因此如果您只是简单地内联内容,那么您最终会在某些平台上看到损坏的字体.

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

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

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

What is the preferred way of including Google Fonts on a page?

  1. Via the <link> tag

    <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. Via import in a stylesheet

    @import url('https://fonts.googleapis.com/css2?family=Kameron:wght@400;700&display=swap');
    

  3. Using the Web Font Loader
解决方案

For 90%+ of the cases you likely want the <link> tag. As a rule of thumb, you want to avoid @import rules because they defer the loading of the included resource until the file is fetched.. and if you have a build process which "flattens" the @import's, then you create another problem with web fonts: dynamic providers like Google WebFonts serve platform-specific versions of the fonts, so if you simply inline the content, then you'll end up with broken fonts on some platforms.

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.

Once again, the 90% case is the <link> tag: use a good CDN and the fonts will come down quick and even more likely, be served out of the cache.

For more info, and an in-depth look at Google Web Fonts, check out this GDL video

这篇关于包括 Google 字体链接或导入?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

05-28 13:46
查看更多