总结与建议

待自定义字体下载完成，页面会使用新字体重新绘制文本，此时如果两种字体的尺寸或字形占位不同，文本区域就可能发生位移，导致相邻元素重新排列，最终拉高CLS分数

实用技巧二：利用font-display优化渲染策略

当网页加载自定义字体💫时，如果浏览器尚未获取到字体文件，通常会先用系统🎨默认字体渲染文本

实用技巧二：利用font-display优🎉化渲染策略 在CSS的 💪@font-face 规则中设置 font-display 属性，可以控制自定义字体加载期间的文本渲染行为

虽然替换过程本身可能产生细微偏移，但通过选用与自定义字体字宽接近的后备💯字体系列（例如将wid:相同或相近的字体配对🌺），可以将偏移量控制在极小范围内，避免触发明显的CLS波动

实用技巧四：局部字体子集化与异步加载

通过工具生成仅包含所用字符的子集字体文件，可以使体积缩小数倍甚至👍数十倍，大幅提升加载速度

实用技巧三：后备字体尺寸对齐与字间距控制

实用技巧三：后备字体尺寸对齐与字间距控制 参数 推荐做法 font-size 统一使用相对单位（如 rem ），并确保后备字体的度量单位与自定义字体一致 line-height 设定固定值（如1

核心思路：字体加载如何影响CLS

这能让浏览器在解析CSS之前就开始下载字体，加速首屏文字的稳定渲染