网站的加载速度与所使用的字体类型之间存在密切关系，我想在本文中讨论这一点。
为此，我将向您介绍我在“都灵网络性能小组”上的演讲。我受邀前往都灵与其他专家分享我的经验，就像在活动中一样，我将首先提出一个问题：
“我们真的需要外部字体吗？ “
在给您答案之前，我们将详细了解字体类型，并向您展示用于优化导致其显示的渲染路径的工具和策略。
系统字体是大多数操作系统中存在的预定义字符。
我在开发网站时最常用的开源 CSS 框架是UIkit和Bootstrap。两者都提供替代系统字体，可以在安装在不同设备上的大多数系统软件上显示。
以下是 UIkit 使用的字体系列：
Bootstrap提出的解决方案是：
这些字符对网站的加载速度没有影响。
网页字体
默认操作系统中不存在网络字体。事实上，这些字体可以直接从网络下载，然后保存到网站上的文件夹中，或者通过插入外部库（例如的链接来保存。
Google 字体的经典加载示例：
如果没有适当的预防措施，网络字体会对网站的加载速度和用户体验产生负面影响。
让我们尝试了解一下是如何实现的。
为什么要细化关键渲染路径
在字体出现在网页上之前，浏览器必须决定如何处理渲染路径以将具有自定义字体的文本返回给用户。
当浏览器请求 HTML 文档并获取其中包含的信 Phygital 进入事件世界 息来构建页面时，关键渲染路径就开始了。
在此过程中，重要的是必须提供必要的字体，否则浏览器虽然已经通过在屏幕上绘制布局和其他内容进行响应，但在加载外部字体之前不会插入任何文本像素！
此外，在此渲染路径中，各种浏览器的行为彼此不同。
这就是网络字体会影响网站性能并因。现在 台灣資料庫 让我们看看为网站选择字体时最常见的一些问题。
加载网络字体时出现问题
网络字体可能会导致网站加载问题。以下两种典型情况可能会使您增加 CLS（累积布局偏移：一）的价值并恶化用户体验。
输出
网站上最常遇到的加载问题是FOUT（Flash of Untitled Text）。在加载网络字体时，浏览器会提供替代字体，这也可能会在页面布局中产生导航问题。
福伊特
当浏览器将网页字体隐藏在渲染路径的管理中直到其完全下载时，就会发生FOIT （Flash of Invisible Text） 。如果这需要很长时间，页面可能会在相当长的时间内保持没有文本，并且可能会增加网站的放弃率。
您的网站可能会发生以下情况：
资料来源：
这两个关键问题的解决方案当然是在等待外部字体完全下载时使用“假字体”。
该解决方案称为FOFT（Flash of Faux Text）。
了解更
如何改进字体加载
为了加速外部字体的加载并使用 FOFT 技术替换字符，可以使用近年来开发的各种策略。
简而言之，您可以为您的网站做很多事情。
您想要带有图形支持的信息材料和我的研究报告吗？
使用 JavaScript 库
一些开发人员出于各种目的选择使用 JavaScript 进行监视和干预（即使在不同浏览器之间不兼容的情况下）：
- 检查字体何时加载（Font Face Observer）
- 异步加载CSS（加载CSS）
- 控制 Web 字体的加载（Web Font Loader）
输入链接预加载和 DNS 预取
DNS Prefetch是一个非常有趣的提高网站性能的工具。要解决延迟问题，您可以使用以下代码与源服务器建立连接：
想知道 Shopify 如何使用Preload将时间缩短 50% ？转到我的演示文稿的第 16 页。
随着时间的推移评估“预加载”、“预连接”和“预取”在主要浏览器中的兼容性并制定您的策略。
使用 Font-display: swap CSS 规则
字体显示是什么意思？通过CSS 中的font-display声明，您可以自定义渲染策略并克服 webfont 加载问题，而无需使用 JavaScript。
年 12 月发现，得益于“字体显示”，61.1% 的页面在加载字体时避免闪烁不可见文本 (FOIT) 。演变。
Font-display CSS 属性适用于以下值：
- auto：它是font-display的初始值，告诉浏览器按照浏览器本身的默认路径显示字体。
- block：使用此关键字，在等待网页字体时，您可以设置一个较短的阻止时间。如果超过设定的时间，如果该字符尚不可用，则使用后备字体进行渲染
- swap：这里甚至没有阻塞期，因为浏览器直接用后备字体渲染文本。原始字体的渲染路径仅在完全下载后才开始。
- Fallback：使用此关键字设置一个较短的阻止期限，如果在此期限内未下载网络字体，用户将在整个网站访问过程中看到替代字体。
- 可选：与前一个相比，这是一项额外的预防措施。如果在阻止期内未下载字体，则在访问网站期间，浏览器将显示替换字体，但会在后台下载网络字体，以便立即可用于将来访问该网站。
确保您的文本在加载网络字体时保持可见
使用font-display:swap是Google I/O ’19 活动期间公布的。
这样您就可以确保加载网页字体时文本对用户可见，并向您报告错误。
但您必须记住针对每个浏览器优化字体格式，事实上每种字体都应该以 WOFF2、WOFF、EOT 和 TTF 形式提供，因为它们是最常用的浏览器中最受支持的格式。
字体和速度
但是，如果我们必须在在线提供的各种字体中选择一种字体来提高网站的性能怎么办？这是网站的最佳字体。
如果性能是您的首要任务，这里介绍了如何为您的网站选择字体。
下面我报告了10 种最快的 Google 字体的排名，这要归功于 KeyCDN 创建的案例研究中收集的数据。
来源：
结论
网络字体还是系统字体？您需要在网站定制和性能之间找到正确的折衷方案。因此，我建议您对标题使用 Web 字体，对文本使用系统字体（反之亦然）。
这样您就可以减少遇到不必要的闪光的机会。此外，通过使用dns-prefetch或preload，您最多可以将字体加载时间减少 1 秒。
最后一个技巧是加载整个网页，而不使用任何渲染阻塞资源（例如 CSS 或 JavaScript 文件）。有时，单独优化字体可能会增加页面加载时间。
