如何解决谷歌Chrome页面重载时自定义字体元素闪烁问题？

Chrome中页面重载时自定义字体元素闪烁，核心是字体加载过程中浏览器的渲染策略导致的。要实现类似无闪烁的效果，可以通过以下几个关键调整：

1. 优化@font-face定义，添加font-display属性 #

font-display属性可以控制浏览器在字体加载完成前后的文本渲染行为，是解决闪烁的核心：

修改你的CSS：

@font-face {
    font-family: "Montserrat";
    src: url("static/Montserrat-Regular.ttf") format("truetype");
    /* 用swap：先显示后备字体，字体加载完成后无缝替换，避免空白也减少闪烁 */
    font-display: swap;
    font-weight: normal;
    font-style: normal;
}

* {
    /* 添加系统字体作为后备，确保字体加载前文本正常显示 */
    font-family: "Montserrat", sans-serif;
}

• font-display: swap：浏览器会立即用后备字体渲染文本，等自定义字体加载完成后再替换，既不会出现空白，也能避免因字体切换导致的明显闪烁。
• 如果希望完全避免字体切换（哪怕短时间空白），可以改用font-display: block，浏览器会隐藏文本直到自定义字体加载完成，适合对字体一致性要求极高的场景。

2. 预加载自定义字体 #

在HTML的<head>中添加预加载指令，让浏览器优先加载字体资源，缩短加载时间，进一步减少闪烁：

<head>
    <link rel="stylesheet" href="styles.css">
    <!-- 预加载字体 -->
    <link rel="preload" href="static/Montserrat-Regular.ttf" as="font" type="font/ttf" crossorigin>
</head>

crossorigin属性是必须的，即使字体在同一域名下，预加载字体时也需要添加，否则浏览器可能不会缓存该字体。

3. 确保字体资源被缓存 #

在服务器端为字体文件设置合理的HTTP缓存头（比如Cache-Control: public, max-age=31536000），让浏览器在后续重载时直接从缓存读取字体，避免重复加载导致的闪烁。

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