在css中使用 font-display: swap 可以优化网络字体加载体验，具体做法是在 @font-face 规则中设置该属性。这会让浏览器先使用系统回退字体显示文本，待自定义字体下载完成后立即替换，避免文字不可见或布局跳动。
font-display: swap 与 swap 的区别是什么
font-display: swap 是 CSS Font Loading API 的一部分，用于控制字体加载期间的表现。它与默认的 auto 不同，默认情况下浏览器可能会隐藏文本直到字体加载完成（FOIT），而 swap 策略允许先显示回退字体（FOUT）。
@font-face {
font-family: 'MyCustomFont';
src: url('myfont.woff2') format('woff2');
font-display: swap;
}
body {
font-family: 'MyCustomFont', sans-serif;
}
上述代码定义了自定义字体并启用 swap 策略。当页面加载时，如果字体尚未就绪，浏览器会使用 sans-serif 作为回退字体立即渲染文本。一旦字体下载完成，浏览器会触发重排并重绘，将文本切换为自定义字体。这种方式确保了用户能立即看到内容，同时最终获得预期的视觉效果。
立即学习“前端免费学习笔记（深入）”；
如何配置超时时间以避免长时间的回退字体显示
可以通过 font-display: swap (5s) 语法指定超时时间。如果在指定时间内字体未加载完成，浏览器将停止等待并继续使用回退字体，防止因网络问题导致字体永远无法加载。
@font-face {
font-family: 'MyCustomFont';
src: url('myfont.woff2') format('woff2');
font-display: swap (5s);
}
在上述示例中，设置了5秒的超时时间。如果5秒内字体未加载完成，浏览器将保持使用回退字体，而不是无限期等待。这有助于提升用户体验，特别是在网络条件较差的情况下。
使用 font-display: swap 时如何处理字体加载失败的情况
当字体加载失败时，浏览器会自动回退到指定的备用字体。可以通过 JavaScript 监听字体加载事件来处理这种情况，例如记录错误或提示用户。
const font = new FontFace('MyCustomFont', 'url(myfont.woff2)');
font.load().then(() => {
document.fonts.add(font);
document.body.style.fontFamily = "'MyCustomFont', sans-serif";
}).catch(() => {
console.error('字体加载失败');
});
上述代码使用 FontFace API 手动加载字体。如果加载成功，则将字体添加到 document.fonts 并更新 body 的字体族。如果加载失败，则捕获错误并输出日志。这种方式提供了更细粒度的控制，可以根据实际需求处理字体加载失败的情况。
