React项目中Google字体加载闪烁问题及解决方法咨询

兄弟，你遇到的这个现象叫做FOUT（Flash of Unstyled Text），是前端里很常见的小问题：浏览器在还没下载完你指定的Google字体时，不会一直卡着不显示内容，而是先渲染你设置的后备字体（这里就是sans-serif），等目标字体加载完成后再切换，所以就会出现那一下跳变的感觉。

先给你指出一个小错误：你当前的字体加载链接里css2和family之间少了个?，这可能会导致字体加载异常，先修正成正确的链接：

<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet" />

下面给你几个实用的解决办法，按需选择：

1. 用font-display控制字体加载策略 #

你链接里的&display=swap是Google字体默认的加载策略，就是先显示后备字体再切换。如果想彻底避免跳变，可以换成其他策略：

• &display=block：浏览器会在字体加载完成前隐藏文本，直到字体就绪才显示，这样就不会有跳变，但如果字体加载慢，用户会短暂看不到内容；
• &display=optional：浏览器只等待极短时间，超时就一直用后备字体，后续也不会再切换，适合对字体不是刚需的场景；
• &display=fallback：和block类似，但等待时间更短，超时后用后备字体，字体加载完还是会切换。

比如想完全消除跳变，就把链接改成：

<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=block" rel="stylesheet" />

2. 预加载字体文件 #

让浏览器提前开始下载字体，减少等待时间，从而弱化甚至消除跳变感知。你可以在index.html的<head>里加上预加载标签：

<link rel="preload" href="https://fonts.gstatic.com/s/bebasneue/v9/JTUSjIg69CK48gW7PXoo9Wlhyw.woff2" as="font" type="font/woff2" crossorigin>

注意：这个URL是Bebas Neue的实际woff2字体文件地址，你可以打开Google字体的CSS链接（就是上面修正后的那个href），找到里面@font-face里的src地址复制过来就行。

3. 本地托管字体文件 #

如果想从根源上解决加载慢的问题，把字体下载到本地托管是最好的选择：

1. 从Google字体官网下载Bebas Neue的字体文件（优先选woff2格式）；
2. 把字体文件放到项目的public/fonts目录下；
3. 在src/index.css里用@font-face定义字体：

@font-face {
  font-family: 'Bebas Neue';
  src: url('/fonts/BebasNeue-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: block; /* 这里同样可以设置加载策略 */
}

之后再用这个字体，因为是本地资源，加载速度会快很多，基本不会有跳变。

4. 让后备字体更贴近目标字体 #

如果不想隐藏文本，又想减少跳变的视觉冲击，可以调整后备字体的样式，让它和Bebas Neue的视觉特性尽量一致：

.bg-header {
  font-family: "Bebas Neue", sans-serif;
  color: darkorange;
  text-decoration: underline;
  position: absolute;
  bottom: 10%;
  left: 5%;
  font-size: 75px;
  /* 模拟Bebas Neue的样式 */
  letter-spacing: 0.05em; /* 调整字间距，和目标字体接近 */
  line-height: 1; /* Bebas Neue的行高偏紧凑 */
}

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