字体加载对CLS的影响及优化技巧

字体加载会影响累计布局偏移（CLS），主要原因是网页字体与后备字体在占用空间上的差异导致布局跳动。当自定义字体尚未加载完成时，浏览器会先用后备字体渲染文本，字体切换后文本尺寸和行高可能变化，从而引起页面元素位置移动，导致CLS增加。

字体加载对CLS的具体影响

• 字体切换导致布局偏移：后备字体和网页字体占用空间不同，字体加载完成后文本重新排版，页面布局发生变化。
• 延迟文本渲染：字体未加载时，浏览器可能延迟文本显示（FOIT，Flash of Invisible Text），或者先显示后备字体（FOUT，Flash of Unstyled Text），两者都可能引起视觉跳动。
• 图标字体特殊性：图标字体与后备字体差异大，使用回退字体会导致更严重的布局变化，建议用SVG替代图标字体以减少CLS。

优化字体加载以降低CLS的技巧

1. 使用 font-display: swap
   该CSS属性允许浏览器先用后备字体显示文本，字体加载完成后再切换为自定义字体，避免文本不可见导致的布局跳动。

2. 预加载关键字体资源
   通过 <link rel="preload" as="font"> 提前加载字体文件，减少字体加载延迟，降低首次渲染时字体切换的概率。

3. 减少后备字体与网页字体的尺寸差异
   使用 CSS 的 font-size-adjust 属性调整字体大小，使后备字体与网页字体视觉尺寸更接近，减少切换时的布局变化。

4. 拆分字体子集按需加载
   对于汉字等字符集庞大的字体，可以拆分为常用字和非常用字子集，优先加载常用字，减少字体文件大小和加载时间。

5. 避免动态插入字体相关内容
   确保字体相关文本区域尺寸固定，避免字体加载完成后文本区域大小变化引起布局偏移。

6. 用SVG替代图标字体
   图标字体切换导致的CLS更严重，推荐用SVG图标替代，提升无障碍性和视觉稳定性。

其他相关优化建议

• 为图片、广告、嵌入内容等动态加载元素预留尺寸，避免加载后推挤布局。
• 避免使用会影响布局的动画属性（如margin、width），优先用transform和opacity实现动画，减少布局变化。

综上，字体加载是影响CLS的重要因素，通过合理设置字体加载策略、预加载关键字体、调整后备字体尺寸及拆分字体子集等方法，可以有效降低字体引起的布局偏移，提升页面视觉稳定性和用户体验。