修复移动端组件引发的Cumulative Layout Shift（CLS）问题

从状态变化和代码来看，CLS异常的核心原因是自定义字体加载前后的文本尺寸偏移，加上移动端列表元素的显示逻辑触发布局重排。以下是具体修复方案：

1. 优化字体加载逻辑，消除字体切换偏移 #

• 在自定义字体的@font-face规则中添加font-display: swap，让浏览器优先显示系统 fallback 字体，自定义字体加载完成后无缝替换，避免空白期同时减少尺寸跳动：

  @font-face {
    font-family: '你的自定义字体名';
    src: url('字体文件路径.woff2') format('woff2');
    font-display: swap;
  }
  

• 为文本元素设置固定的排版参数，让系统字体和自定义字体的尺寸匹配：

  .text__link {
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.02em;
    white-space: nowrap; /* 避免文本换行引发的布局变化 */
  }
  

2. 锁定移动端列表的初始布局空间 #

移动端初始仅显示最后3个text__item，需要提前为这些元素预留固定尺寸，避免字体加载后宽高变化引发重排：

.text__item {
  &:nth-last-child(-n+3) {
    display: inline-block;
    min-width: 90px; /* 根据实际文本的最大宽度设置 */
    height: 26px; /* 匹配文本行高+内边距的总高度 */
  }
}

@media (max-width: $screen-sm - 1px) {
  .text__list {
    height: 26px; /* 固定列表高度，避免整体布局跳动 */
    overflow: hidden;
  }
}

3. 优化元素显示逻辑，减少重排触发点 #

避免使用display: none/inline-block的切换（会触发全量重排），改用visibility+绝对定位处理非显示元素：

@media (max-width: $screen-sm - 1px) {
  .text__item:not(:nth-last-child(-n+3)) {
    position: absolute;
    visibility: hidden;
    pointer-events: none; /* 禁用交互，避免误触 */
  }
}

4. 预加载自定义字体 #

在HTML头部添加字体预加载，缩短字体加载时间，减少布局偏移的持续时间：

<link rel="preload" href="字体文件路径.woff2" as="font" type="font/woff2" crossorigin>

内容的提问来源于stack exchange，提问作者Sonny49