本地加载自定义字体先显默认字体再闪烁切换求助（附示例站点）
2026-5-19
解决自定义字体加载闪烁问题
兄弟，你碰到的这个是很常见的**字体加载闪烁（FOUT/FOIT）**问题——浏览器在自定义字体还没加载完成时，会先显示系统默认字体，等字体文件下载完才切换过去，就出现了闪烁的情况。下面给你几个实用的解决方案，按推荐优先级排序：
1. 用font-display属性（最推荐，现代浏览器友好）
这是CSS里专门解决字体加载行为的属性，直接加到你的@font-face规则里就行，不同取值对应不同的策略：
swap：优先显示 fallback 字体，等自定义字体加载完成后立刻切换，几乎不会让用户感觉到闪烁，是最常用的选项fallback：短时间（约100ms）等待字体加载，超时就显示 fallback，之后字体加载完再切换optional：和fallback类似，但如果字体加载超时就再也不切换了，适合非核心文本的字体
修改后的@font-face代码示例：
/* Open Sans regular */ @font-face { font-family: "Open Sans"; src: url("./wp-includes/fonts/OpenSans-Regular.eot"); /* IE9 Compat Modes */ src: url("./wp-includes/fonts/OpenSans-Regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("./wp-includes/fonts/OpenSans-Regular.woff2") format("woff2"), /* 优先用woff2，体积更小加载更快 */ url("./wp-includes/fonts/OpenSans-Regular.woff") format("woff"), /* Modern Browsers */ url("./wp-includes/fonts/OpenSans-Regular.ttf") format("truetype"), /* Safari, Android, iOS */ url("./wp-includes/fonts/OpenSans-Regular.svg") format("svg"); /* Legacy iOS */ font-display: swap; /* 关键属性 */ }
2. 预加载字体文件
通过<link rel="preload">告诉浏览器优先加载字体文件，减少等待时间，把这段代码放到HTML的<head>里：
<link rel="preload" href="./wp-includes/fonts/OpenSans-Regular.woff2" as="font" type="font/woff2" crossorigin>
注意：即使字体是同域的，也要加crossorigin属性，因为浏览器对字体资源的跨域处理有特殊规则。
3. 优化字体文件体积
字体文件越大，加载时间越长，闪烁越明显。你可以做这些优化：
- 只保留现代浏览器支持的格式：现在绝大多数浏览器都支持
woff2，它的体积比其他格式小很多，你可以只保留woff2格式，删掉旧的eot、svg等格式，大幅减少加载时间 - 裁剪字体：如果只用到字体里的部分字符，可以用工具裁剪字体，只保留需要的字符，进一步缩小体积
4. 隐藏文本直到字体加载（不推荐，影响体验）
这个方法是让浏览器在字体加载完成前不显示文本，避免闪烁，但如果字体加载失败，用户就看不到内容了，所以谨慎使用：
- 用
font-display: block;：浏览器会隐藏文本最多3秒，超时就显示fallback字体 - 或者用JavaScript监听字体加载事件，加载完成后再显示文本，但需要写额外的代码处理降级
内容的提问来源于stack exchange，提问作者Sam Jefferies
