Angular应用部署后自定义字体首次加载pending，刷新后正常问题求助

我之前也碰到过类似的字体加载问题，结合Angular部署的常见坑，给你梳理几个最可能的原因和对应的排查方向：

• 字体预加载未配置，请求优先级被压低
  首次加载时，浏览器会优先处理HTML、主JS和CSS这类核心资源，字体请求往往被排到后面，甚至被挂起进入pending状态。你可以手动在index.html里添加预加载标签，强制浏览器提前请求字体：

  <link rel="preload" href="assets/fonts/your-custom-font.woff2" as="font" type="font/woff2" crossorigin>
  

  注意crossorigin属性不能少——哪怕字体在同域，部分浏览器也需要这个属性才能完成预加载。

• 服务器响应头配置异常
  部署服务器如果没有正确设置字体文件的响应头，也可能导致请求阻塞：

  • 未设置正确的Content-Type（比如font/woff2），浏览器无法快速识别资源类型，延迟处理请求
  • Cache-Control等缓存头设置不合理，首次请求时服务器没有返回有效的缓存标识，导致请求卡在pending状态
    建议打开浏览器开发者工具的Network面板，查看字体文件的响应头是否符合规范。

• 字体定义放在延迟加载模块中，触发时机过晚
  如果你的@font-face定义是在某个延迟加载的模块CSS里，首次加载页面时这个模块的CSS还没被加载，字体请求要等到模块加载后才会触发。此时浏览器的请求队列可能已经被其他资源占满，导致字体请求pending。解决方法是把@font-face移到全局样式文件（比如styles.scss）中，确保页面初始化时就能解析到字体定义，提前发起请求。

• 浏览器字体加载策略与资源优先级冲突
  部分浏览器默认采用FOIT（隐藏文本直到字体加载完成）策略，但如果字体请求被高优先级资源（如主JS、核心CSS）阻塞，就会一直处于pending状态。你可以在@font-face里添加font-display: swap，让浏览器先显示 fallback 字体，同时后台加载自定义字体，既不影响页面渲染，也能保证字体加载完成后自动替换：

  @font-face {
    font-family: 'YourCustomFont';
    src: url('../assets/fonts/your-custom-font.woff2') format('woff2');
    font-display: swap;
  }
  

• 打包路径或重定向问题
  虽然这种情况更多会导致404，但如果部署时base href设置错误，或者服务器配置了不合理的重定向，也可能让字体请求陷入pending。检查Network面板里字体的请求URL是否正确，有没有多次重定向的情况。

内容的提问来源于stack exchange，提问作者Daria Domagała