<link rel='preload' href='/fonts/inter-var.woff2'
as='font' type='font/woff2' crossorigin>
控制台每次加载都红两条:GET /fonts/inter-var.woff2 404,页面字体看着还正常,因为实际用的是另一个文件名。这类现象通常不是突然出现的,往前翻半天日志能看到苗头。
追下去是这么回事:模板里的 preload 是手写的,字体换版本后只改了 CSS 的引用,link 那一行留着旧名字。预加载失败不阻塞渲染,所以页面看着没事,只在控制台留错。
「preload 404」改完先别急着全量,挑一台机器放半天,真有问题这段时间就能看出来。权限不要一口气开到最大,先加到够用再往上试,范围小才好收。
把复现步骤压到三条以内,交给同事也能跑出来,才算真的定位清楚。改动写完就同步给同事,下一个人踩同一个坑,成本还是你的。
处理上按这个顺序:全局搜 rel 为 preload 的标签,把失效地址删掉或者跟着构建产物更新;字体引用交给构建工具生成,不要手写文件名;补上 as 和 crossorigin,缺一个会重复下载。
确认没问题再收工,控制台不再出现字体 404,Network 里字体只请求一次。
