HTML中如何用font-display控制字体加载时的文字显示

作者：袖梨 2026-06-05
font-display: swap是解决字体加载闪烁的底线配置，必须写在@font-face中、配合format("woff2")声明、preload预加载及度量相近的fallback字体，缺一不可。

直接加 font-display: swap 就能压住大部分字体加载闪烁，但不配 src 格式声明、不预加载、不选对 fallback 字体，照样会跳。

font-display 必须写在 @font-face 里，且只对 format() 正确的 src 生效

浏览器靠 format() 声明预估字体加载行为，如果漏写或写错，font-display 可能被忽略，退回到默认的 block 行为（即 FOIT 白屏约 3 秒）。

  • src 中必须显式标注格式，比如 url("inter.woff2") format("woff2")，不能只写 url("inter.woff2")
  • 同一字体多个变体（如 regular / bold / italic）要各自独立声明 @font-face，并各自带 font-display
  • Safari 11.1+ 才支持 font-display，旧版 Safari 会直接无视——若需兼容，得搭配 document.fonts.load() 回退逻辑

swap 是最常用值，但替换仍可能引起布局重排

font-display: swap 的本质是「先用 fallback 渲染，再无感替换」，所谓“无感”取决于 fallback 和目标字体的度量是否接近。字号越大、行高越紧、字宽差异越明显，跳动越容易被肉眼捕捉。

  • 中文字体 fallback 推荐用 "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei" 这类系统级字体，避免用 "sans-serif" 这种泛称
  • 英文正文 fallback 用 "system-ui", -apple-system, BlinkMacSystemFont 比 Helvetica 更稳，因前者是操作系统实际渲染链
  • 如果发现替换后段落高度突变，说明 fallback 字体的 line-height 或 font-size 计算值和 Web 字体不一致，需用 CSS 显式锁定

preload 配合 swap 才能缩短 FOUT 时间窗口

只设 swap 不预加载，字体资源仍要等 CSS 解析完才发起请求，弱网下 fallback 显示时间可能长达 1–2 秒——用户会觉得“闪得久”，不是不闪。

立即学习“前端免费学习笔记（深入）”；

  • 在 <head> 里加预加载：<link rel="preload" href="inter.woff2" as="font" type="font/woff2" crossorigin>
  • crossorigin 属性不可省：WOFF2 字体跨域加载必须带它，否则 preload 失效，且后续 @font-face 可能报 CORS 错误
  • 不要 preload 所有字体变体；只 preload 首屏用到的 weight（如 400 和 700），其余按需加载

fallback 和 optional 适合非关键文字，但行为不可逆

font-display: fallback 给字体约 100ms 加载窗口，超时就永久用 fallback；optional 更激进，由浏览器决定是否加载——两者都杜绝了替换跳动，但也意味着你无法保证品牌字体一定出现。

  • fallback 适合图标字体（如 icon-font）、次要标题等非核心文本
  • optional 适合装饰性大标题、动画字效等，移动端常直接跳过，别用在正文
  • 一旦用了 fallback 或 optional，即使字体后来缓存命中，也不会再触发替换——这点容易被忽略，以为“加载完还会换”

真正难的不是写对 font-display，而是让 fallback 字体在宽度、x-height、字间距上足够贴近目标字体；否则 swap 再快，眼睛也会抓到那一帧跳动。

相关文章

精彩推荐