使用Tailwind CSS的Flexbox导航栏hover时文字变粗导致布局偏移

问题根源是文字从font-normal切换到font-bold时，字符宽度会增加，导致Flex布局重新计算空间，引发偏移。以下是几个不破坏响应式的解决方案：

方案1：固定链接最小宽度（最简单通用） #

给每个导航链接设置inline-block和足够容纳粗体文本的最小宽度，确保hover前后元素宽度一致，同时加上文字居中避免视觉偏移：

<div class="mx-12 flex items-center justify-around">
  <nav>
    <ul class="flex gap-8">
      <li>
        <a href="/" class="text-2xl font-normal hover:font-bold inline-block min-w-[70px] text-center"> Shop </a>
      </li>
      <li>
        <a href="/About" class="text-2xl font-normal hover:font-bold inline-block min-w-[100px] text-center"> About us </a>
      </li>
      <li>
        <a href="/Contact" class="text-2xl font-normal hover:font-bold inline-block min-w-[120px] text-center"> Contact us </a>
      </li>
    </ul>
  </nav>
</div>

你可以根据实际字体的粗体宽度调整min-w-[...]的数值，确保所有状态下链接宽度足够。

方案2：使用可变字体（无宽度变化的平滑过渡） #

如果你的项目使用支持字重变体的可变字体（比如Inter、Roboto Flex等），可以通过字体变体设置实现无宽度变化的加粗效果，同时支持平滑过渡：

首先在Tailwind配置中添加自定义工具类：

tailwind.config = {
  theme: {
    extend: {
      fontFamily: {
        inter: ['Inter', 'sans-serif'], // 替换为你使用的可变字体
      },
    },
  },
  plugins: [
    ({ addUtilities }) => {
      addUtilities({
        '.font-w-400': {
          'font-variation-settings': "'wght' 400",
        },
        '.font-w-700': {
          'font-variation-settings': "'wght' 700",
        },
      });
    },
  ],
};

然后修改HTML代码：

<div class="mx-12 flex items-center justify-around">
  <nav>
    <ul class="flex gap-8 font-inter">
      <li>
        <a href="/" class="text-2xl font-w-400 hover:font-w-700 transition-all duration-200"> Shop </a>
      </li>
      <li>
        <a href="/About" class="text-2xl font-w-400 hover:font-w-700 transition-all duration-200"> About us </a>
      </li>
      <li>
        <a href="/Contact" class="text-2xl font-w-400 hover:font-w-700 transition-all duration-200"> Contact us </a>
      </li>
    </ul>
  </nav>
</div>

可变字体的字重变化不会改变字符宽度，hover时只会平滑变粗，完全没有布局偏移。

方案3：伪元素叠加粗体文本（不改变原元素宽度） #

通过绝对定位的span元素叠加粗体文本，正常状态下隐藏，hover时显示，原链接的宽度保持不变：

<div class="mx-12 flex items-center justify-around">
  <nav>
    <ul class="flex gap-8">
      <li class="relative">
        <a href="/" class="text-2xl font-normal relative z-10"> Shop </a>
        <span class="absolute inset-0 text-2xl font-bold opacity-0 hover:opacity-100 transition-opacity"> Shop </span>
      </li>
      <li class="relative">
        <a href="/About" class="text-2xl font-normal relative z-10"> About us </a>
        <span class="absolute inset-0 text-2xl font-bold opacity-0 hover:opacity-100 transition-opacity"> About us </span>
      </li>
      <li class="relative">
        <a href="/Contact" class="text-2xl font-normal relative z-10"> Contact us </a>
        <span class="absolute inset-0 text-2xl font-bold opacity-0 hover:opacity-100 transition-opacity"> Contact us </span>
      </li>
    </ul>
  </nav>
</div>

这个方案适合无法固定宽度的场景，缺点是需要重复写文本内容，维护成本稍高。

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