常见问题三：字体预加载不足或异步加载失控

它让浏览器立即用后备字体显示文本，自定义字体加载完成后再切换

常见问题一：font-display 属性设置不当

当网页使用的自定义字体（如非系统🎯默认字体）加载延迟或失败时，浏览器会先用后备字体渲染文本，待自定义字体加载完成后再次切换，这一替换🔍过程常造成页面元素发生明显位移

以下梳理字体加载引发CLS的常见场景，并提供经实践验证的解决方案

当自定义字体🌈（如更细长的黑体）加载后替代后备字体，文本占据的宽度和高度发生突🌺变，导致换行、行间距变化，进而推动下方元素产生偏移

其他关键注意事项

字体加载不当是导致CLS的常见🚀“元凶”之一

常见问题一：font-display 属性设置不当 许多开发者通过在CSS中使用 @font-face 并忽略 font-display 属性，或仅使用默认值 auto

常见问题二：后备字体尺寸与自定义字体差异过大

此方式可彻底▶️避免CLS，但降低了字体的显示机会

常见问题三：字体预加载不足或异步加载失控

解决方案 使用 link rel="preload" 预加载字体 ：在HTML的 <head> 中提前声明，如 <link rel="preload" href="/fonts/NotoSansSC

将最关键的字体定义放在页面初始CSS里，确保渲染被阻塞前字体请求已发起

其他关键注意事项

它仅在字体极短时间内加载完成时使🔍用🎊，否则永久使用后备字体