消除字体加载CLS的常用技术方案

此方法适用🌈于小体积字体，但需注意内联后的CSS文件大小🤔可能膨胀，需权衡利弊

测试工具的使用 ：可使用Lighthouse或百度搜索的“网页体验分析”工具检测CLS值，结合Chrome DevTools的“Performance”面板观察字体加载时间线

什么是字体加载引起的CLS问题

字体加载时机靠后 ：如果字体文件通过CSS的 @font-face 声明但未设置 font-display 属性，浏览器默认采用阻塞或交换策略，容易导致布局重算

使用字体子集化与WOFF2格式 针对中文字体，只保留页面实际使用的字符（子集化），并优先使用压缩率更高的WOFF2格式💫，能大幅降低字体文件体积，加快加载速度

刘诗婷

在CSS中统一添加 font-display: swap ，并通过 <link r🌅el="preload" a🌈s="font"> 预加载最重要的正文字体

字体加载CLS的直接成因

字体加载期间的尺寸占位 分析自定义字🌈体与后备👍字体的宽度、行高差异，在CSS中为文本容器设置固定的尺寸或使用 size-adjust 、 ascent-override 等CSS属性（属于 @font-face 的描述符）进行微调

优化中的注意事项

当真相慢慢浮出水面，所有疑惑瞬间解开，那种恍然大悟的畅快、被剧情牵着情绪走的紧张，以及结尾留下的留白与思考，会让整部影片的观感直接拉满，看完依旧回味无穷

优化中的注意事项 不要单纯依赖 font-display: swap ：如果后备字体与自定义字体差异过大，即使采用交换模式，切换时依然可能产生明显偏移

实践案例分享：某企业官网字体CLS优化

); size-adjust: 95%; } 🎨通过百分比调整，使后备字体占用的空间与自定义字体尽可能一致，从而消除偏移量

常见的工具包括Fontto🎆ols、Glyph💯hanger等

预加载需谨慎 ：预加⭐载所有字体文件可能抢占带宽，影响首屏其他关键资源的下载，📚建议只预加载首屏必需的字体

更多精选文章

字体加载CLS的直接成因 字体文件🌅体积较大🌅 ：自定义字体通常包含多种字重、字符集，文件大小可达数MB，加载延迟明显

使用 font-display: swap 配合预加载 在 @font-face 声明中添加 font-display: swap ，可以让浏览器立即使用后备字体渲染文本，待自🔥定义字体加载完成后再替换

将关键字体内联到CSS中 👍对于首屏必需的自定义字体（如品牌字体），可将字体的🔍Base64编码内联到CSS文件的头部，避免额外的网络请求