如何在CSS中使用font-display swap优化网络字体加载体验-css教程-PHP中文网

在css中使用 font-display: swap 可以优化网络字体加载体验，具体做法是在 @font-face 规则中设置该属性。这会让浏览器先使用系统回退字体显示文本，待自定义字体下载完成后立即替换，避免文字不可见或布局跳动。

如何在CSS中使用font-display swap优化网络字体加载体验

`font-display: swap` 与 `swap` 的区别是什么

font-display: swap 是 CSS Font Loading API 的一部分，用于控制字体加载期间的表现。它与默认的 auto 不同，默认情况下浏览器可能会隐藏文本直到字体加载完成（FOIT），而 swap 策略允许先显示回退字体（FOUT）。

如何在CSS中使用font-display swap优化网络字体加载体验

@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) 语法指定超时时间。如果在指定时间内字体未加载完成，浏览器将停止等待并继续使用回退字体，防止因网络问题导致字体永远无法加载。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

如何在CSS中使用font-display swap优化网络字体加载体验

@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 的字体族。如果加载失败，则捕获错误并输出日志。这种方式提供了更细粒度的控制，可以根据实际需求处理字体加载失败的情况。