CSS水平导航栏Hover字体加粗导致元素移位问题咨询

问题根源 #

hover时修改font-weight会让文本宽度增加，flex布局下元素宽度变化会带动其他链接移位。以下是几种实用的解决办法：

方法一：固定导航链接宽度 #

给每个导航链接设置固定宽度并让文本居中，确保字体粗细变化时元素宽度保持稳定：

.buttons a {
    color: black;
    text-decoration: none;
    font-size: 1.125rem;
    font-weight: 400;
    /* 添加固定宽度与居中对齐 */
    width: 80px;
    text-align: center;
}

可根据实际文本长度调整width的值，保证所有链接文本都能完整容纳。

方法二：用text-shadow模拟加粗效果 #

不修改font-weight，通过多层文本阴影模拟加粗视觉效果，避免文本宽度变化：

.buttons a:hover {
    cursor: pointer;
    /* 移除font-weight: 800，替换为阴影 */
    text-shadow: 0 0 0.5px black, 0 0 0.5px black, 0 0 0.5px black;
    color: var(--hover-state);
}

调整阴影的数量和模糊值，可匹配font-weight:800的视觉效果。

方法三：用字符单位预占宽度 #

使用ch单位（基于当前字体下数字"0"的宽度）设置最小宽度，适配不同文本长度：

.buttons a {
    color: black;
    text-decoration: none;
    font-size: 1.125rem;
    font-weight: 400;
    /* 按最长文本的字符数设置最小宽度 */
    min-width: 7ch;
    text-align: center;
}

这种方式比固定像素宽度更适配字体变化场景。

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