文本加粗时出现大Layout Shift（布局偏移）问题求助

加粗文本引发布局偏移的核心原因是粗体字比普通文本宽度更大，浏览器渲染时需要重新计算排版，导致周围元素位移。以下是几个实用的解决办法：

1. 用可变字体保持宽度一致 #

如果你的字体支持可变粗细（大部分现代自定义字体都支持），可以通过CSS控制字体权重，让粗细变化时文本宽度不变：

/* 针对段落内的粗体元素 */
p strong {
  font-variation-settings: 'wght' 700; /* 700对应粗体权重，根据你的字体调整 */
}

这种方式是最优解，既能保留原生粗体效果，又不会改变文本宽度。

2. 预留给粗体足够的宽度 #

给包含粗体的文本容器设置最小宽度，提前占好空间，避免渲染时重排：

/* 给包含粗体的段落或行内容器设置最小宽度 */
.text-containing-bold {
  min-width: fit-content;
}

如果能提前测量出粗体文本的宽度，也可以直接设置固定的min-width数值，效果更稳定。

3. 同步加载常规和粗体字体 #

布局偏移常发生在字体加载延迟时：普通文本先显示系统字体，之后自定义字体加载完成替换，粗体字体又晚一步加载，导致两次排版变化。解决办法是：

• 给字体设置font-display: swap，同时预加载粗体字体：

@font-face {
  font-family: 'YourCustomFont';
  src: url('your-font-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'YourCustomFont';
  src: url('your-font-bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

在HTML头部添加预加载：

<link rel="preload" href="your-font-bold.woff2" as="font" type="font/woff2" crossorigin>

4. 应急方案：用CSS模拟粗体 #

如果暂时找不到合适的字体方案，可以用缩放模拟粗体，不改变文本宽度：

p .simulate-bold {
  display: inline-block;
  transform: scaleX(1.1); /* 横向缩放比例根据视觉效果调整 */
  transform-origin: left center;
}

注意：这种方法视觉效果不如原生粗体，只适合临时应急。

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