React CRA项目CSS导入字体仅开发服生效，Firebase生产构建回退Arial

针对开发环境正常、部署到Firebase后字体回退的常见场景，按优先级从高到低排查：

• 优先校验CSS中@导入语句的实际位置
  开发模式下CRA的webpack-dev-server会将每个组件的CSS作为独立样式块注入，你的App.css开头就是字体导入，符合CSS规范要求，因此能正常生效。但生产构建流程会将所有零散CSS合并压缩为单个全局文件，按照组件引入顺序拼接内容，App.css的引入位置晚于全局默认样式块，会把原本的@import语句挤到普通样式规则后方。根据CSS规范，所有@import语句必须出现在样式表最顶端，一旦前面出现非@开头的规则，浏览器会直接静默忽略这些导入请求，完全不会发起字体资源的拉取。
  验证方式：打开线上站点DevTools，查看加载的最终生产CSS文件，定位字体import语句的位置，若其前方存在普通CSS规则，即可确认是该问题。
  临时解决方法：将字体的@import语句从App.css移出，统一放到public/index.html的<style>标签最顶端，完全绕开构建工具的CSS重排逻辑。
• 排查浏览器控制台的拦截类报错
  本地开发环境运行在localhost，浏览器对跨域、安全策略的拦截阈值远低于生产线上的HTTPS站点，部署到Firebase后常见的拦截原因包括三类：

  混合内容拦截：若线上站点为HTTPS协议，而字体请求被降级为HTTP，浏览器会直接拦截非加密资源。可将@import的URL去掉协议头，改为//db.onlinewebfonts.com/开头的自适应协议格式，避免协议不匹配问题。
  CORS跨域限制：跨域字体资源必须由源站返回匹配的Access-Control-Allow-Origin响应头才能正常加载。localhost可能被免费字体源加入了默认放行列表，但你绑定的Firebase线上域名不在放行范围内，就会触发加载失败。
  CSP安全策略拦截：若Firebase托管配置中自定义了Content-Security-Policy响应头，未将db.onlinewebfonts.com加入font-src、style-src白名单，浏览器会直接拦截该域名的所有请求。
  验证方式：打开DevTools的Network面板，筛选font类型请求，查看对应请求的状态码、报错信息，匹配上述原因逐一修正。

• 排查外部字体源的可达性问题
  免费公共字体源的访问稳定性没有保障，可能会根据请求来源IP做访问限制。本地开发时的出口IP和线上Firebase托管节点的出口IP访问权限不一致，就会出现本地能拉取、线上拉取失败的情况。
  生产环境最可靠的解决方案是将需要的字体文件下载到本地项目，通过@font-face规则实现自托管，完全不依赖外部公共源。示例写法：

  @font-face {
    font-family: "Whitney";
    src: url("./assets/fonts/Whitney.woff2") format("woff2");
    font-display: swap;
  }
  @font-face {
    font-family: "UniSansW01-Heavy";
    src: url("./assets/fonts/UniSansW01-Heavy.woff2") format("woff2");
    font-display: swap;
  }
  

内容的提问来源于stack exchange，提问作者Henrik VT