font-display 是纯 CSS 解决 FOIT/FOUT 的方案，常用值为 swap（备用字体先显，加载完切换）、optional（100ms 内未加载则弃用）和 auto（浏览器自定，不推荐）；需写在 @font-face 内 src 后，配合 woff2、子集、preload 可进一步优化。
字体加载前文字闪动（FOIT/FOUT）本质是浏览器对自定义字体的默认行为导致的。用 font-display 可以明确告诉浏览器：字体还没好时，文字该怎么显示——不靠 JavaScript 或 hack，纯 CSS 就能解决。
它有 5 个可选值，常用的是下面三个：
必须把 font-display 写在 @font-face 规则里，且放在 src 后面才生效：
@font-face {
font-family: 'HarmonyOS Sans';
src: url('harmony.woff2') format('woff2');
font-display: swap; /* 关键：放这里 */
font-weight: 400;
}注意：不能写在外部 CSS 类或 style 标签里，也不支持通过 JS 动态设置。
立即学习“前端免费学习笔记（深入）”；
单靠 font-display: swap 能消除闪动，但若字体文件大、网络差，用户可能长时间看到备用字体。建议配合：
woff2 格式（压缩率高，现代浏览器全支持）preload：<link rel="preload" href="harmony.woff2" as="font" type="font/woff2" crossorigin>
在 Chrome DevTools 的 Application → Fonts 面板里，能看到每个字体的“Display”状态；也可在 Network 面板禁用缓存、刷新页面，观察文字是否从系统字体平滑切换为目标字体——没有跳变，就说明 swap 生效了。
不复杂但容易忽略。
以上就是css字体加载完成前文字闪动怎么办_通过font-display控制字体加载策略的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
324
收藏
