故障表现
移动端首屏白屏时间长,网络面板里字体文件从境外域名加载耗时明显。
问题出在哪
主题直接引用第三方字体服务,国内访问慢且不稳定。判断时先分清是 WordPress 字体本地化 本身的配置问题,还是上游调用、运行环境带进来的差异;前者改配置就能收口,后者要沿着请求链路一层层往上找,处理顺序不能颠倒。先在出问题的机器上复现一次,把报错原文和发生时间记下来,再对着日志定位。
按这个顺序处理
- 下载字体文件放到主题目录
- 改用本地声明并加 font-display
- 移除远程引用
对应的命令或配置片段如下,可直接复制:
@font-face {
font-family: 'SiteFont';
src: url('/wp-content/themes/x/fonts/a.woff2') format('woff2');
font-display: swap;
}
改完只在一台机器上验证不够,至少从外网和移动网络各试一次,才能确认不是本地缓存造成的假象。不要一次改多个参数,每次只动一处并记录下来,否则现象变了也说不清是哪个改动起的作用。
怎么确认改好了
首屏字体加载耗时下降,页面无字体闪烁。