Fonts怎么加载

这篇文章主要介绍“Fonts怎么加载”，在日常操作中，相信很多人在Fonts怎么加载问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Fonts怎么加载”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

成都创新互联公司是一家专注于成都网站制作、网站设计与策划设计,成华网站建设哪家好?成都创新互联公司做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:成华等地区。成华做网站价格咨询:18980820575

使用网络字体的工作流很简单，是吧？选择一些看起来不错的网络可用字体，获取 HTML 或 CSS 代码段，将其放入项目中，然后检查它们是否显示正确。人们每天数以千次地像这样操作谷歌字体：将它的标签放入中。

我们来看下Lighthouse是如何评价这样的工作流的。

Lighthouse

标签中的样式表被Lighthouse标记为阻塞渲染的资源，它们竟然让渲染增加了一秒钟？这看起来不是很好。

我们已经按照书籍，文档，HTML标准完成了所有工作，为什么Lighthouse还是会告诉我这样不对呢？

让我们来讨论下如何让字体样式文件成为非渲染阻塞资源，并且探讨一种不仅让Lighthouse满意，还要解决加载字体时通常会出现糟糕的无样式文本闪烁(FOUT)问题。我们将使用原生的HTML，CSS和JavaScript来完成这些工作，因此我们可以在任何技术栈中使用它们。另外我们还将介绍下Gatsby的实现以及一个由本人开发的简单、开箱即用的插件。

什么是渲染阻塞字体

浏览器加载网页时，会从DOM（HTML的一个对象模型）和CSSOM（所有css选择器的映射）中生成渲染树。渲染树是关键渲染路径中的一部分，关键渲染路径代表了浏览器在渲染页面中的每个步骤。浏览器为了渲染一个页面，需要加载并解析HTML文档以及链接到该HTML中的每个CSS文件。

下面是一个非常典型的直接从谷歌字体样式表：

@font-face {    font-family: 'Merriweather';    src: local('Merriweather'), url(https://fonts.gstatic.com/...) format('woff2');  }

你可能会认为字体样式的文件体积很小，因为他们通常最多包含一些@font-face定义。因此它们应该不会对页面渲染造成可以感知的影响，事实是这样吗？

假设我们正在从外部cdn服务器加载一个CSS字体文件。当我们的网页在加载时，浏览器需要等待文件从CDN服务器上加载并且载入到渲染树中。不仅如此，它还需要等待在CSS的@font-face属性中定义的作为URL值引用的字体文件请求并加载完成。

关键点：字体文件成为关键渲染路径的一部分，并且延迟了页面的渲染。

加载字体样式表和字体文件时阻塞了关键渲染路径

对于普通用户来说网站最重要的部分是什么？当然是内容了。因此在页面加载过程中我们必须尽快将内容呈现给用户。为此，关键渲染路径必须精简到只剩下关键资源(例如HTML和关键的CSS)，其余的内容将在页面渲染完成后加载，包括字体。

如果一个用户正在较差的网络环境下浏览未经过优化的页面，坐在空白的屏幕前等待字体文件和其他关键资源载入完成将会使他非常恼火。除非该用户非常有耐心，否则他很可能会以为是页面根本没有开始加载，直接放弃等待，关闭窗口。

然而，如果非关键资源的渲染被推迟，内容尽可能快地被呈现了出来，用户将能够浏览页面并且忽略任何缺少的表现样式(比如字体)——当然，如果字体并不是内容的一部分的话。

经过优化的网站尽可能快地渲染包含关键CSS的内容，并且延迟非关键资源的加载。第二个时间线的0.5s和1.0s之间出现了一个字体的切换，表明了显示样式开始渲染的时间。

载入字体的最佳实践

重复造轮子没有意义。哈里·罗伯茨（Harry Roberts）已经很好地介绍了一种加载字体的最佳实践。他通过深入的研究以及来自谷歌字体的数据，将其归纳为四个步骤：

•  预连接到字体文件的站点。

•  以低优先级异步预加载字体样式表。

•  在内容渲染完成后，使用JavaScript异步加载字体样式表和字体文件。

•  为关闭JavaScript的用户提供一个备用字体。

让我们使用Harry的方法来实现我们的字体：

注意字体样式链接上的media="print"。浏览器会自动赋予打印样式一个低优先级并将其排除在关键渲染路径之外。在打印样式表加载完成后，onload事件将会被触发，媒体将会切换为一个默认的all值，字体将被应用于所有的媒体类型（屏幕、打印和语音）。

Lighthouse很满意这个方法！

需要注意的是，自托管字体还可以帮助解决渲染阻塞问题，但这并非适用于所有情况。例如，使用CDN可能是不可避免的。在某些情况下，让CDN在提供静态资源时承担繁重的工作是有益的。

尽管我们现在以最佳的非渲染阻止的方式加载了字体样式表和字体文件，我们还是引入了一个小的用户体验问题……

无样式文本闪烁(FOUT)

这就是我们说的FOUT：

为什么会这样呢？为了去掉阻塞渲染的资源，我们必须在页面内容已渲染（即显示在屏幕上）之后加载它。对于在关键资源之后异步加载的低优先级字体样式表，用户可能会看到从备用字体切换为下载完的字体的瞬间。不仅如此，页面的布局可能会偏移，导致一些元素在网络字体加载完成之前看起来很割裂。

处理FOUT的最好方式是让备用字体和网络字体之间的切换平滑。为此我们要做的有：

•  尽可能选择一个与异步加载的字体相似的系统字体。

•  调整备用字体的样式（font-size，line-height，letter-spacing等），尽可能地让异步载入的字体与备用字体特征匹配。

•  在异步加载的字体文件渲染完成后立即清除备用字体的样式，并应用为新载入的字体准备的样式风格。

我们可以使用字体匹配器找到我们选定并计划使用的任何网络字体的最佳备用字体和配置。在我们为备用字体和网络字体准备好样式风格后，我们可以继续下一步。

本例中Merriweather是要使用的字体，Georgia是备用字体。一旦Merriweather的样式风格被应用，布局偏移应当降到最小，并且字体切换不应该被察觉。

我们可以使用CSS字体加载API来检测Web字体何时加载。为什么要这样？Typekit的网络字体加载器曾经是实现它的一种比较流行的方法，尽管继续使用它或其他类似的库看起来很诱人，但我们需要考虑以下几点：

•  它已经四年没有更新了，这意味着，如果插件有任何问题或需要引入新功能，很可能没有人会更新与维护了。

•  我们已经使用Harry Roberts的代码有效地处理了异步加载，不需要依赖JavaScript来加载字体。

如果你问我，使用类似Typekit的库为这样的简单任务带来了过多的JavaScript代码。我想避免使用任何第三方的库和依赖，因此让我们自己找到解决方案，并且尽可能地使其简洁明了，而不会过度设计。

尽管CSS字体加载API被认为是实验性功能，但它已经有大约95%的浏览器支持了。但无论如何，我们还是要提供备用字体，因为API可能在将来发生了改变或被废弃。丢失字体的风险不值得我们去冒。

CSS字体加载API可用于动态和异步地加载字体。我们已经决定不依赖JavaScript来完成诸如字体加载之类的简单操作，并且已经使用带有预加载和预连接的纯HTML的最佳实践解决了它。我们将使用API中的一个函数，该函数将帮助我们检查字体是否已加载并可用。

document.fonts.check("12px 'Merriweather'");

check()函数判断在参数中指定的字体是否可用并返回true或false。字体大小参数值对于我们的用例而言并不重要，可以将其设置为任何值。不过，我们需要确保：

•  页面上至少有一个HTML元素，其中包含至少一个字符，并已应用了网络字体的声明。在示例中，我们将使用 。但任何字符都可以使用，只要它对于有视力和无视力的用户都是隐藏的(不使用display: none;)。API跟踪已应用字体样式的DOM元素。如果页面上没有匹配的元素，则API无法确定字体是否已加载。

•  在check()函数的参数中指定的字体正是CSS中调用的字体。

在下面的演示中，我已经使用CSS字体加载API实现了字体加载的监听器。出于演示的目的，加载字体及其监听器将通过点击模拟页面加载的按钮来触发，以便您可以看到改变的发生。在常规项目中，这应该在网站加载和渲染完成后立即进行。

那不是很棒吗？多亏了CSS字体加载API的良好支持，们花了不到30行JavaScript代码来实现一个简单的字体加载监听器。在此过程中，我们还处理了两种可能的极端情况：

•  API出了点问题，或者发生了一些阻止网络字体加载的错误。

•  用户正在关闭JavaScript功能的情况下浏览网站。

现在，我们有了一种检测字体文件何时完成加载的方法，我们需要向备用字体中添加样式以匹配网络字体，并了解如何更有效地处理FOUT。

备用字体和网络字体之间的切换看起来很平滑，我们设法实现了不那么明显的FOUT！在复杂的站点上，这个改变将会带来少量的布局偏移，依赖内容大小的元素也不会看起来被破坏或者位置不对。

背后发生了什么

让我们从HTML开始仔细看一下前面示例中的代码。我们有元素中的代码片段，它使我们可以通过预加载、预连接和存在备用地异步载入字体。

                /* There is a non-breaking space here */