create-react-app（已eject）本地加载Base64字体失败求助

我来给你梳理几个实际可行的排查方向，都是我踩过坑或者帮同行解决过的类似问题：

• 先验证Base64编码的有效性
  本地环境对资源的校验通常比生产环境严格，生产能正常解析的编码，本地可能因为编码不完整/损坏报错。你可以把Base64字符串解码成实际的woff文件：

  • 用命令行工具：base64 -d 你的Base64字符串文件 > test.woff
  • 或者用本地字体查看工具（比如FontForge）打开解码后的文件，如果文件无法正常显示字体，说明编码过程出了问题，重新生成正确的Base64编码即可。

• 检查@font-face配置的完整性
  除了format('woff')，还要确保其他属性和实际使用场景匹配，本地环境对属性匹配的容错性更低：

  @font-face {
    font-family: 'CustomIconFont'; /* 确保这个名称和你调用时的font-family完全一致 */
    src: url('data:application/font-woff;charset=utf-8;base64,你的编码内容') format('woff');
    font-weight: normal; /* 匹配你使用图标时的字体权重，不要随便写bold */
    font-style: normal;
    font-display: block; /* 避免本地加载时出现FOIT（字体加载失败导致的文字闪烁） */
  }
  

  另外，确认调用图标的元素没有被其他CSS规则覆盖了font-family，可以在浏览器开发者工具的Elements面板里查看computed样式。

• 排查本地webpack配置的差异
  因为已经执行了eject，本地开发环境的webpack配置（webpack.dev.js）和生产环境（webpack.prod.js）可能存在资源处理差异：

  • 检查是否有针对字体文件的loader（比如file-loader/url-loader/asset-modules）把Base64内容二次编码了，导致解码失败。可以暂时在dev配置里注释掉字体相关的loader规则，让CSS里的Base64内容原样输出。
  • 查看dev配置里的devtool选项，某些sourcemap模式可能会干扰资源解析，暂时改成eval试试。

• 清理浏览器缓存并调试网络请求
  本地浏览器可能缓存了之前错误的字体资源，导致新配置不生效：

  • 打开开发者工具（F12），在Network面板勾选「Disable cache」，然后刷新页面，查看字体请求的状态（是否返回200），Response里的Base64字符串是否和你写的一致。
  • 在Console面板里查看是否有其他隐藏的错误提示，比如字体加载时的跨域问题（虽然Base64是内联的，但某些本地环境可能有特殊限制）。

• 尝试调整data URI的格式
  有时候charset=utf-8可能会干扰woff字体的解析，你可以去掉charset部分试试：

  src: url('data:application/font-woff;base64,你的编码内容') format('woff');
  

  另外，确认你的woff字体是标准格式，有些非标准的woff文件在本地浏览器里兼容性更差。

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