在网页开发中使用自定义字体时，字体加载闪烁是常见的问题，浏览器默认会先展示系统默认字体，等到自定义字体加载完成后再进行替换，这个过程中页面文字会出现明显的样式跳变，影响用户的阅读体验。我们可以通过CSS的font-face规则配合font-display属性来优化这个加载过程，减少甚至避免闪烁问题。
字体加载闪烁的产生原因
浏览器加载网页时，会先解析HTML和CSS，当遇到font-face定义的自定义字体时，不会阻塞页面的渲染，而是继续展示内容。此时自定义字体还没有加载完成，浏览器会使用fallback字体（通常是系统默认字体）来展示文字。等到自定义字体加载完成后，浏览器会替换文字的字体样式，这个替换过程就会形成用户肉眼可见的闪烁。
font-display属性介绍
font-display是CSS中用于定义自定义字体加载期间和加载失败后的展示行为的属性，它只能用在@font-face规则内部，取值主要有以下几个：
- auto：使用浏览器默认的字体加载策略，不同浏览器的表现可能存在差异，通常和block表现类似。
- block：字体加载期间会有一个短暂的阻塞期（通常是3秒左右），这段时间内文字不可见，阻塞期结束后如果字体还没加载完成，就使用fallback字体展示，等字体加载完成后再替换。
- swap：没有阻塞期，直接使用fallback字体展示文字，等自定义字体加载完成后再立即替换，这是最常用的减少闪烁的取值。
- fallback：有极短的阻塞期（大约100毫秒），如果阻塞期内字体加载完成就使用自定义字体，否则使用fallback字体，之后不会再替换，适合对字体样式要求不高的场景。
- optional：有极短的阻塞期，阻塞期内字体加载完成就使用，否则就永远使用fallback字体，不会在后续替换，适合网络较差的场景。
使用font-display减少闪烁的具体配置
我们只需要在定义font-face时添加font-display属性即可，以下是完整的配置示例：
/* 定义自定义字体 */
@font-face {
font-family: "MyCustomFont";
/* 字体文件路径，根据实际存放位置调整 */
src: url("./fonts/my-custom-font.woff2") format("woff2"),
url("./fonts/my-custom-font.woff") format("woff");
font-weight: normal;
font-style: normal;
/* 设置字体加载策略为swap，减少闪烁 */
font-display: swap;
}
/* 使用自定义字体 */
body {
font-family: "MyCustomFont", "Microsoft YaHei", sans-serif;
}
上面的配置中，我们给自定义字体设置了font-display: swap，浏览器会先使用后面的fallback字体展示文字，等自定义字体加载完成后再无缝替换，不会出现文字突然消失再出现的情况，大幅减少了闪烁感。
不同场景的取值选择建议
我们可以根据页面的实际需求选择合适的font-display取值：
| 取值 | 适用场景 |
|---|---|
| swap | 大部分需要自定义字体的场景，比如品牌官网、内容类网站，优先保证文字可快速阅读，同时最终展示自定义字体 |
| fallback | 自定义字体不是核心视觉元素，比如辅助性的说明文字，允许部分用户看不到自定义字体 |
| optional | 网络环境复杂，或者自定义字体文件较大，不希望因为加载字体影响页面性能的场景 |
| block | 对字体样式要求极高，允许短暂的文字不可见的场景，比如艺术展示类页面 |
其他优化建议
除了设置font-display之外，还可以配合其他优化手段进一步减少字体加载的影响：
- 优先使用woff2格式的字体文件，它的压缩率更高，加载速度更快。
- 控制自定义字体的字符集，只引入页面需要用到的文字，减小字体文件体积。
- 使用preload预加载关键字体，让浏览器提前发起字体请求，缩短加载时间。
通过合理配置font-display属性，结合其他字体优化手段，我们可以有效解决CSS字体加载闪烁的问题，给用户带来更流畅的页面浏览体验。
CSSfont-facefont-display字体加载闪烁修改时间：2026-07-16 21:24:29