Next.js页面重载时出现FOUT（无样式文本闪烁）问题求助

下面是几种可行的解决思路，你可以根据实际场景选择：

• 用font-display控制字体加载行为
  在@font-face规则中添加font-display属性，让浏览器更合理地处理字体加载过程：

  @font-face {
    font-family: 'Poppins';
    src: url('poppins.woff2') format('woff2');
    font-display: swap; /* 优先显示系统备用字体，待Poppins加载完成后替换 */
    /* 若想完全避免闪烁，可尝试font-display: optional; 仅在字体快速加载完成时才使用，否则一直用备用字体 */
  }
  @font-face {
    font-family: 'Bebas Neue';
    src: url('bebas-neue.woff2') format('woff2');
    font-display: fallback;
  }
  

  调整font-display的值，能有效减少字体切换带来的视觉突兀感。

• 预加载Poppins字体
  在HTML头部添加预加载标签，让浏览器优先加载Poppins字体，缩短它的加载时间，减少切换等待：

  <link rel="preload" as="font" href="poppins.woff2" type="font/woff2" crossorigin>
  

  注意要确保href指向正确的字体文件路径，crossorigin属性不可省略（即使字体在同域名下）。

• 匹配初始字体与目标字体的视觉尺寸
  字体切换时的尺寸差异是闪烁感的重要来源，你可以通过以下方式让Bebas Neue和Poppins的视觉表现更接近：

  • 调整font-size和line-height，让两种字体在相同设置下的行高、字符大小尽量一致
  • 使用font-size-adjust属性，基于字体的x-height来统一尺寸：

    body {
      font-size-adjust: 0.5; /* 根据两种字体的x-height调整数值，Poppins的x-height约为0.5左右，Bebas Neue可对应调整 */
    }
    

• 用JS字体加载器控制字体切换时机
  使用Font Face Observer这类工具，监听Poppins字体加载完成后再应用到页面，避免中途切换：

  // 先引入Font Face Observer库
  const poppinsObserver = new FontFaceObserver('Poppins');
  
  poppinsObserver.load().then(() => {
    document.body.classList.add('poppins-loaded');
  }).catch(() => {
    // 加载失败时的 fallback 逻辑
  });
  

  对应的CSS：

  body {
    font-family: 'Bebas Neue', sans-serif;
  }
  .poppins-loaded body {
    font-family: 'Poppins', sans-serif;
  }
  

  这种方式能完全避免中途切换的闪烁，只有当Poppins加载完成后才替换字体。

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