案例背景：一个典型的布局偏移场景

这些现象累积起来，导致该页面的CLS值被百度工具检测为 0

使用CSS属性控制字体与图标加载 有时，字体或图标字体（如Font Awesome）加载前后会导致文字宽度变化，进而引发重排

优化结果与数据对比 🍀指标 优化前 优化后 CLS值（移动端） 0

实操建议与注意事项

04，不仅远低于百度推荐的阈值🎨，用户的交互体验也得到明显改善

移动端适配时，注意不同屏幕尺寸下的响应式布局偏🎯移，特❤️别是横竖屏切换场景

更多精选文章

优化团队采取了以下措施： 使用 font-display: swap 或 optional 值，确保字体加载期间使用系统备用字体，避免无文字阶段导致的布局变化

将关键图标替换为 内联SVG 或使用Base64编码的图标，消除外部字体文件加载带来的不确定性