React应用刷新页面后字体变更问题求助

• 检查字体加载与声明逻辑
  确保自定义字体通过@font-face正确声明，且放在全局样式文件最顶部，避免组件样式加载延迟导致 fallback 字体先显示。示例代码：

  @font-face {
    font-family: 'YourCustomFont';
    src: url('/fonts/your-font.woff2') format('woff2'),
         url('/fonts/your-font.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* 可选block/optional，控制字体加载时的文本显示行为 */
  }
  
  body {
    font-family: 'YourCustomFont', sans-serif;
  }
  

  font-display: swap会先显示系统 fallback 字体，待自定义字体加载完成后切换；block会短暂隐藏文本直到字体加载完成，可避免字体闪烁切换的问题。

• 排查缓存与样式优先级冲突

  • 给字体文件添加版本号（如your-font-v2.woff2），避免浏览器缓存旧字体文件
  • 检查React组件内的内联样式、高优先级选择器是否覆盖了全局字体设置，比如组件中写了font-family: sans-serif !important这类规则

• 临时禁用Strict Mode排查
  React Strict Mode在开发环境会双重渲染组件，可能导致样式加载顺序异常。可暂时移除index.js中的<StrictMode>标签，测试是否还存在字体切换问题。若问题消失，再排查组件中是否有重复执行的样式逻辑。

• 用CSS Reset/Normalize替代all: unset
all: unset过于激进，容易引发其他样式问题。改用Normalize.css或自定义CSS Reset统一浏览器默认样式，再明确设置全局字体：

  /* 引入Normalize.css后 */
  body {
    margin: 0;
    padding: 0;
    font-family: 'YourCustomFont', sans-serif;
    font-size: 16px;
  }
  

• SSR/SSG场景下的样式注入检查
  若使用Next.js等SSR框架，确保字体样式在服务器端就注入到HTML中，避免客户端加载时的样式延迟。比如在_document.js中直接添加全局字体声明。

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