故障表现

移动端首屏白屏时间长,网络面板里字体文件从境外域名加载耗时明显。

问题出在哪

主题直接引用第三方字体服务,国内访问慢且不稳定。判断时先分清是 WordPress 字体本地化 本身的配置问题,还是上游调用、运行环境带进来的差异;前者改配置就能收口,后者要沿着请求链路一层层往上找,处理顺序不能颠倒。先在出问题的机器上复现一次,把报错原文和发生时间记下来,再对着日志定位。

按这个顺序处理

  1. 下载字体文件放到主题目录
  2. 改用本地声明并加 font-display
  3. 移除远程引用

对应的命令或配置片段如下,可直接复制:

@font-face {
  font-family: 'SiteFont';
  src: url('/wp-content/themes/x/fonts/a.woff2') format('woff2');
  font-display: swap;
}

改完只在一台机器上验证不够,至少从外网和移动网络各试一次,才能确认不是本地缓存造成的假象。不要一次改多个参数,每次只动一处并记录下来,否则现象变了也说不清是哪个改动起的作用。

怎么确认改好了

首屏字体加载耗时下降,页面无字体闪烁。

作者 9823189