Vue开发复选框时标签加粗如何避免容器尺寸增大

同字号下，字体不同字重对应的字形水平占用宽度（advance width）存在差异，粗体字形的字宽普遍大于常规字重。你的组件外层容器是flex布局，会自动根据子元素内容宽度计算自身尺寸，因此label切换到粗体时会把容器撑宽，出现布局跳动。

以下方案均使用真实 font-weight 属性实现粗体，不需要文字阴影、缩放类的模拟方案，适配任意传入的label文本： #

纯CSS实现，无JS依赖，自动适配任意长度文本，不会出现文本溢出问题，是通用性最好的方案。
原理是用不可见的伪元素提前渲染粗体状态的文本，让父容器始终以粗体文本的宽度为基准计算尺寸，切换字重时不会出现宽度突变。

实现步骤 #

1. 修改模板中的label节点，绑定data-label属性传入文本内容，供伪元素读取：

<span class="label" :class="labelClasses" :data-label="props.label">
  {{ props.label }}
</span>

2. 修改.label的样式，添加占位伪元素，注意伪元素的字重要和你实际使用的粗体字重完全一致：

.label {
  @apply block;
  // 常规状态字重
  font-weight: 400;

  // 粗体占位伪元素
  &::before {
    @apply block h-0 overflow-hidden invisible font-bold;
    content: attr(data-label);
  }

  // 替换成你实际触发粗体的类名，比如选中状态的类
  &.is-bold {
    @apply font-bold;
  }
}

如果你希望容器尺寸始终和常规字重下的文本宽度一致，粗体文本允许轻微溢出不改变布局，可以用双层文本方案：一层不可见的常规字重文本专门占位置，一层绝对定位的文本负责显示，切换粗体时不会影响外层容器尺寸。

实现步骤 #

1. 修改模板结构，给label加一层包裹容器：

<span class="label-wrapper relative inline-block">
  <!-- 占位层：始终为常规字重，决定容器宽度 -->
  <span class="invisible block">{{ props.label }}</span>
  <!-- 显示层：绝对定位，字重可自由切换 -->
  <span class="label absolute left-0 top-0" :class="labelClasses">
    {{ props.label }}
  </span>
</span>

2. 添加对应样式，注意行高要和原文本保持一致避免错位：

.label-wrapper {
  // 行高和你项目的基准文本行高保持一致
  @apply leading-6;
}
.label {
  @apply font-normal;
  &.is-bold {
    @apply font-bold;
  }
}

如果你的项目使用支持字宽（wdth）轴的可变字体，可以直接通过字体可变设置锁定字宽，不管字重如何切换，单个字符的占用宽度保持不变，代码量最少：

.label {
  // wdth的取值根据你使用的可变字体调整，常规字宽一般为100
  font-variation-settings: "wdth" 100;
}

该方案依赖可变字体支持，非可变字体下不生效。 #

• 不要给label或外层容器设置固定宽度，否则长文本会出现溢出截断
• 方案1、2均不依赖JS，适配任意动态传入的label文本，兼容所有主流浏览器

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