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

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

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

权衡 font-di⭐😎splay: optional ：如果对性能要求极高，且网页字体非品牌必需，可考虑 optional

其他关键注意事项

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

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

字体加载与CLS：百度搜索优化中的常见隐患

精简的故事⭐搭⭐配考究的制作，快速了解历史人物的闪光点

使用CSS size-adjust 和 ascent-override 等属性 ：这些CSS字体描述符（Font Descriptors）允许开发者微调后备字体的渲染尺寸，使其与自定义字体更一致

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

尤其对于中文网站，中文字体文😎件体积较大（如思源黑体、苹方等），加载时间更长，若未妥善处理，CLS问题会显著恶化

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

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

解决方案 选择字形度量接近的后🔥备字体 ：尽量选用与自定义字体视觉大小相近的后备字体

例如，若自定义字体为“Noto Sans SC”，后备可选用“PingFan🎇g SC”或“Microsof🌈t YaHei”，它们的字符宽度差异较小