一、什么是 FOIT 和 FOUT
在网页开发中，我们经常会遇到一些字体加载的问题，其中 FOIT 和 FOUT 就是比较常见的。FOIT 是“Flash of Invisible Text”的缩写，意思是“不可见文本闪烁”。当网页加载时，如果字体文件还没有下载完成，浏览器会先让文本不可见，直到字体文件下载好并可以使用，这期间用户会看到一片空白，就像文本消失了一样。
比如说，我们有一个简单的 HTML 文件，里面有一段文字，并且引用了一个自定义字体：
<!-- HTML 技术栈 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FOIT 示例</title>
<style>
@font-face {
font-family: 'CustomFont';
src: url('customfont.woff2') format('woff2');
}
body {
font-family: 'CustomFont', sans-serif;
}
</style>
</head>
<body>
<p>这是一段使用自定义字体的文字。</p>
</body>
</html>
在这个例子中，如果 customfont.woff2 文件下载比较慢，那么在下载完成之前，用户看到的这段文字就是空白的，这就是 FOIT。
FOUT 则是“Flash of Unstyled Text”的缩写，也就是“无样式文本闪烁”。当字体文件还没下载好时，浏览器会先使用系统默认字体显示文本，等字体文件下载完成后，再将文本的字体替换为自定义字体。这样用户会先看到一段用默认字体显示的文本，然后突然变成自定义字体，视觉上会有一个闪烁的效果。
二、FOIT 和 FOUT 导致的布局偏移问题
FOIT 和 FOUT 不仅会影响用户体验，还可能导致布局偏移。因为不同字体的宽度和高度可能不同，当字体从默认字体切换到自定义字体时，文本的大小会发生变化，从而导致页面布局的改变。
还是上面那个例子，如果默认字体和自定义字体的宽度不一样，当字体从默认字体切换到自定义字体时，这段文字所占的宽度就会改变，可能会影响到周围元素的位置，导致布局偏移。比如，原本在这段文字旁边的按钮，可能会因为文字宽度的变化而被挤到别的地方去。
三、CSS 字体加载优化方法
1. 使用字体预加载
字体预加载可以让浏览器提前下载字体文件，减少 FOIT 和 FOUT 的出现。我们可以使用 <link> 标签的 rel="preload" 属性来实现字体预加载。
<!-- HTML 技术栈 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体预加载示例</title>
<!-- 预加载字体文件 -->
<link rel="preload" href="customfont.woff2" as="font" type="font/woff2" crossorigin>
<style>
@font-face {
font-family: 'CustomFont';
src: url('customfont.woff2') format('woff2');
}
body {
font-family: 'CustomFont', sans-serif;
}
</style>
</head>
<body>
<p>这是一段使用自定义字体的文字。</p>
</body>
</html>
在这个例子中，<link rel="preload" href="customfont.woff2" as="font" type="font/woff2" crossorigin> 这行代码告诉浏览器提前下载 customfont.woff2 字体文件。这样，当页面需要使用这个字体时，字体文件可能已经下载好了，就可以减少 FOIT 和 FOUT 的出现。
2. 使用 font-display 属性
font-display 属性可以控制字体加载的行为，从而减少布局偏移。它有几个取值：
auto：浏览器默认行为，可能会出现 FOIT 或 FOUT。block：会有一个短暂的不可见文本阶段（FOIT），之后字体加载完成就显示。swap：先使用系统默认字体显示文本，等字体加载完成后再替换（FOUT）。fallback：有一个非常短的不可见文本阶段，然后如果字体还没加载好，就使用默认字体，之后字体加载完成再替换。optional：有一个非常短的不可见文本阶段，然后如果字体还没加载好，就一直使用默认字体。
/* CSS 技术栈 */
@font-face {
font-family: 'CustomFont';
src: url('customfont.woff2') format('woff2');
font-display: swap; /* 使用 swap 取值，先显示默认字体，再替换 */
}
body {
font-family: 'CustomFont', sans-serif;
}
在这个例子中，我们使用 font-display: swap，这样在字体加载完成之前，会先使用系统默认字体显示文本，避免了长时间的不可见文本阶段，减少了 FOIT 的出现，同时也能一定程度上减少布局偏移。
四、应用场景
1. 企业官网
企业官网通常会使用自定义字体来展示独特的品牌形象。如果不进行字体加载优化，可能会出现 FOIT 或 FOUT 问题，影响用户对企业的第一印象。通过字体预加载和 font-display 属性的使用，可以让官网的字体加载更加流畅，提升用户体验。
2. 电商网站
电商网站的商品详情页和促销活动页面通常会有大量的文字信息。如果字体加载出现问题，导致布局偏移，可能会影响用户对商品信息的查看和购买决策。优化字体加载可以确保页面布局稳定，让用户更舒适地浏览商品。
3. 博客网站
博客网站的主要内容就是文字，如果字体加载不顺畅，会让读者阅读体验变差。通过优化字体加载，可以让读者更专注于文章内容，提高网站的用户留存率。
五、技术优缺点
优点
- 提升用户体验：通过优化字体加载，可以减少 FOIT 和 FOUT 的出现，让用户看到更流畅的页面，避免了文本闪烁和布局偏移的问题，提高了用户的阅读体验。
- 增强品牌形象：使用自定义字体可以展示独特的品牌风格，而优化字体加载可以确保品牌字体能够正常显示，增强品牌形象。
- 提高网站性能：字体预加载可以让浏览器提前下载字体文件，减少页面加载时间，提高网站的性能。
缺点
- 增加开发成本：需要额外的代码来实现字体预加载和
font-display属性的设置，增加了开发的复杂度和时间成本。 - 兼容性问题：虽然大多数现代浏览器都支持
font-display属性，但一些旧版本的浏览器可能不支持，这可能会导致在这些浏览器上仍然出现 FOIT 或 FOUT 问题。
六、注意事项
1. 字体文件大小
字体文件越大，下载时间就越长，越容易出现 FOIT 和 FOUT 问题。因此，在选择字体时，尽量选择文件大小较小的字体，或者对字体文件进行压缩。
2. 跨域问题
如果字体文件是从其他域名加载的，需要确保设置了正确的跨域头。在上面的字体预加载示例中，我们使用了 crossorigin 属性，就是为了解决跨域问题。
3. 浏览器兼容性
在使用 font-display 属性时，要考虑不同浏览器的兼容性。可以使用浏览器前缀来提高兼容性，例如 -webkit-font-display、-moz-font-display 等。
七、文章总结
在网页开发中，FOIT 和 FOUT 会导致文本闪烁和布局偏移问题，影响用户体验。通过 CSS 字体加载优化，如使用字体预加载和 font-display 属性，可以有效减少这些问题的出现。字体预加载可以让浏览器提前下载字体文件，而 font-display 属性可以控制字体加载的行为。同时，我们要注意字体文件大小、跨域问题和浏览器兼容性等方面。在不同的应用场景中，如企业官网、电商网站和博客网站，字体加载优化都能发挥重要作用，提升网站的性能和用户体验。
评论