如何以与福特战斗并使灯塔快乐的方式加载字体

Web字体实现似乎很简单：选择字体，获取代码，集成和验证显示。许多人每天使用Google字体，只需添加其<link>标签。但是，灯塔经常将其标记为有问题。为什么？让我们探索消除渲染字体样式表并创建一个最佳设置，以使灯塔取悦灯塔，同时又可以防止可怕的未风格文本（FOUT）。我们将仅使用HTML，CSS和JavaScript来实现广泛的适用性。

解释了渲染障碍字体

浏览器网站加载涉及从DOM（HTML对象模型）和CSSOM（CSS选择器映射）创建渲染树。这是关键渲染路径的一部分。浏览器需要加载和解析HTML和所有链接的CSS文件。

典型的Google字体样式表看起来像这样：

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

虽然看似很小，但这些样式表，尤其是从外部CDN加载时会导致延迟。浏览器必须等待样式表，然后将引用的字体文件加载，从而延长渲染时间。这使得字体文件部分是关键渲染路径的一部分。

内容至关重要。为了确定优先级，将关键的渲染路径最小化（HTML和关键CSS），将包括字体在内的其他所有内容（包括字体）推迟到渲染后。这样可以防止用户在等待字体加载时遇到令人沮丧的空白屏幕。

最佳字体加载

哈里·罗伯茨（Harry Roberts）的方法很棒：

1. 前连接：到字体来源。
2. 预紧力：样式表异步，优先级低。
3. 异步加载：使用JavaScript呈现内容后，加载样式表和字体文件。
4. 后备字体：用于禁用JavaScript的用户。

执行：

<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect">
<link as="style" href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap" rel="preload">
<link href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap" media="print" onload="this.media='all'" rel="stylesheet">

media="print"属性给出了样式表的低优先级，将其排除在关键渲染路径之外。加载后， onload将媒体切换到all 。自托管字体也可以提供帮助，但是CDN通常仍然是必要的。

但是，这种优化引入了Fout。

解决福特

Fout是从后备到Web字体的可见转变。缓解措施涉及：

1. 合适的后备字体：与Web字体紧密匹配。
2. 匹配样式：调整后备字体样式（大小，线路高等）以匹配Web字体。
3. 样式清除：一旦Web字体加载并应用Web字体样式，就可以删除后备样式。

CSS字体加载API有助于检测Web字体加载。尽管存在Typekit加载器之类的库，但鉴于我们有效的异步加载，它们已经过时且不必要。 API的check()函数确定字体可用性：

 document.fonts.check（“ 12px'Merriweather'”）;

确保存在具有Web字体声明的HTML元素（甚至隐藏）供API跟踪。 check()中的字体名称必须匹配CSS声明。

使用此API的简单侦听器在字体之间平稳过渡，从而最大程度地减少了Fout。错误处理和JavaScript可分配的后备至关重要。

实施详细信息

HTML包括一个隐藏<div>使用Web字体应用，对于API跟踪至关重要。 CSS使用类来管理selflack和Web字体的样式。 JavaScript使用<code>setInterval通过API定期检查字体加载，应用适当的样式并在加载后清除间隔。错误处理可确保在API问题的情况下应用后备样式。

盖茨比实施

盖茨比插件简化了此过程，将配置（ gatsby-config.js ），服务器端代码（ gatsby-ssr.js ）和客户端代码（ gatsby-browser.js ）分开。该插件管理预加载，预连接标签，隐藏的字体元素和字体加载侦听器。

可以轻松集成的预构建的gatsby-omni-font-loader插件。

结论

优先考虑内容是关键。异步字体加载，与字体加载侦听器和精心选择的后备字体相结合，确保了光滑的用户体验，消除了渲染障碍物问题并最大程度地减少了Fout。考虑使用预构建的插件以在Gatsby中进行更简单的实现。

以上是如何以与福特战斗并使灯塔快乐的方式加载字体的详细内容。更多信息请关注PHP中文网其他相关文章！