如何在本地测试font-display: swap并验证效果留存凭证

先提前确认配置本身没有错 #

• 打开跑在本地的Web应用，按F12调出开发者工具，切到元素面板，随便选一个应用了自定义字体的文本节点
• 在右侧的计算样式栏直接搜font-display，能看到对应@font-face规则的取值为swap就说明规则写对了；也可以直接全局搜代码里的@font-face声明，确认没有漏加属性的规则

核心操作：人为制造字体慢加载场景 #

font-display: swap的触发逻辑是「自定义字体加载耗时超过浏览器默认的隐形文字窗口期时，先显示回退字体，等字体加载完再做替换」。如果是本地测试，字体文件基本都是毫秒级加载完成，根本达不到触发阈值，必须刻意拖慢字体的加载速度：

• 调出开发者工具的网络面板，打开顶部的节流下拉框，选「自定义节流」
• 不需要把整个页面的速度都压下来，更精准的操作是单独给字体资源限速：
  • 打开开发者工具的「更多工具」->「网络条件」面板
  • 找到「按请求类型节流」选项，只选中「字体」类型，把它的下载速度调到10kb/s以内，HTML、CSS、JS这些页面核心资源保持无节流，保证页面能正常打开，只有字体加载被刻意拖慢
• 实用小技巧：如果想更夸张地看到效果，可以临时把回退字体改成和自定义字体差异极大的字体（比如把默认的系统无衬线改成等宽字体），不然两种字体长得差不多，你可能看不出切换过程

观察渲染过程确认生效 #

• 按Ctrl+Shift+R（Mac是Cmd+Shift+R）硬刷新页面，跳过本地缓存，从头触发完整的加载流程：
  • 未生效的表现：页面打开后文本区域会空白1-3秒，等字体完全加载才一次性显示所有内容
  • 正常生效的表现：页面打开瞬间就用回退字体把所有文本完整渲染出来，等字体加载完成后，再无缝切换为自定义字体
• 可以配合网络面板的字体请求计时信息交叉验证：只要字体的总加载耗时超过3秒（Chrome默认的FOIT窗口期），但页面全程没有出现文本隐形的情况，就说明配置没有问题

留存测试佐证的操作 #

• 截图类佐证：
  • 用开发者工具自带的性能录制功能：切到性能面板，点开始录制，硬刷新页面跑完完整加载流程后停止录制，时间轴上会清晰标记「首次文本渲染（回退字体）」「自定义字体加载完成替换文本」两个关键节点，直接对时间轴截图
  • 也可以按时间顺序截三张静态图：页面刚打开0.5秒时的回退字体显示状态、字体加载中途的页面状态、字体完全加载完成后的自定义字体显示状态，搭配网络面板里字体请求的耗时截图，就能完整还原效果
• 文档类佐证：
  • 把计算样式栏里font-display: swap的规则截图、上面的性能时间轴截图、加载过程的状态截图整理到测试文档里，标注清楚本地测试地址、用到的节流参数、观察到的渲染过程，就可以作为正式的测试记录

常见测试踩坑提醒：
每次测试前一定要硬刷新清缓存，不然字体已经被浏览器提前存下来，加载速度太快，根本看不到swap的切换过程

内容的提问来源于stack exchange，提问作者Vibhor Dube