如何修复字体样式切换时的菜单宽度跳动问题？

当横向菜单里的<li>点击后变粗，元素宽度变化导致菜单跳动，本质是加粗前后文本占据的宽度不一样，下面是几个直接有效的解决办法：

方法1：用隐藏的加粗文本提前占位 #

在每个<li>里加一个和显示文本完全一致的元素，设置为加粗但隐藏，让它提前占好加粗后的宽度。实际显示的文本放在上面，点击时只改变它的粗细，宽度已经被占位元素撑住了，不会跳动。

HTML结构：

<ul class="menu">
  <li>
    <span class="placeholder">Text</span>
    <span class="content">Text</span>
  </li>
  <li>
    <span class="placeholder">Text 2</span>
    <span class="content">Text 2</span>
  </li>
</ul>

CSS样式：

.menu {
  list-style: none;
  display: flex;
  gap: 20px; /* 菜单间距 */
}

.menu li {
  position: relative;
}

/* 占位元素：加粗但不可见，只占宽度 */
.menu .placeholder {
  font-weight: bold;
  visibility: hidden;
  white-space: nowrap; /* 防止文本换行 */
}

/* 实际显示的文本：绝对定位覆盖在占位元素上 */
.menu .content {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}

/* 点击后给实际文本加粗 */
.menu .content.active {
  font-weight: bold;
}

JavaScript（点击切换效果）：

document.querySelectorAll('.menu .content').forEach(item => {
  item.addEventListener('click', () => {
    // 先移除所有active状态
    document.querySelectorAll('.menu .content').forEach(i => i.classList.remove('active'));
    // 给当前点击项添加active
    item.classList.add('active');
  });
});

方法2：给<li>设置固定最小宽度 #

提前计算好每个<li>加粗后的宽度，给它设置min-width，这样即使文本变粗，元素宽度也不会变化。嫌手动计算麻烦的话，也可以用JavaScript动态获取加粗后的宽度再赋值：

示例代码：

<ul class="menu">
  <li>Text</li>
  <li>Text 2</li>
</ul>

CSS：

.menu {
  list-style: none;
  display: flex;
  gap: 20px;
}

.menu li {
  cursor: pointer;
}

.menu li.active {
  font-weight: bold;
}

JavaScript：

document.addEventListener('DOMContentLoaded', () => {
  const menuItems = document.querySelectorAll('.menu li');
  
  menuItems.forEach(item => {
    // 创建临时元素模拟加粗后的文本，获取宽度
    const temp = document.createElement('span');
    temp.textContent = item.textContent;
    temp.style.fontWeight = 'bold';
    temp.style.visibility = 'hidden';
    temp.style.whiteSpace = 'nowrap';
    document.body.appendChild(temp);
    
    // 把加粗后的宽度设为li的最小宽度
    const width = temp.offsetWidth;
    item.style.minWidth = `${width}px`;
    
    // 移除临时元素
    document.body.removeChild(temp);
    
    // 点击切换active状态
    item.addEventListener('click', () => {
      menuItems.forEach(i => i.classList.remove('active'));
      item.classList.add('active');
    });
  });
});

方法3：用CSS text-shadow模拟加粗（局限性大） #

如果不想改变元素宽度，可以用文字阴影模拟加粗效果，文本实际宽度不变，但视觉上有加粗感。不过这种效果不如真实的font-weight: bold自然，适合对视觉要求不高的场景：

.menu li.active {
  /* 多叠加几层阴影模拟加粗 */
  text-shadow: 0 0 1px currentColor, 0 0 1px currentColor, 0 0 1px currentColor;
  /* 无需设置font-weight: bold */
}

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