鼠标悬停时font-weight变化致元素偏移：如何避免布局晃动？

当字体从400变为700时，文字宽度会增加，导致布局偏移。以下是几种可行的解决方法：

方法1：固定链接宽度 #

给链接元素设置足够容纳加粗后文字的宽度，确保hover时尺寸不变：

.discount a{
    margin-bottom: 5px;
    position: relative;
    font-weight: 400;
    width: fit-content; /* 让宽度适配文字 */
    padding-right: 4px; /* 预留加粗后增加的宽度，数值可根据字体调整 */
}

.discount a:hover {
    font-weight: 700;
    padding-right: 0; /* 可选：hover时移除预留padding，保持文字对齐 */
}

如果所有链接文字长度相近，也可以直接设置固定宽度：

.discount a{
    /* 其他样式 */
    width: 80px; /* 根据实际文字长度调整 */
}

方法2：伪元素实现无偏移加粗 #

利用绝对定位的伪元素显示加粗文字，原元素保持原尺寸，完全不影响布局：

.discount a{
    margin-bottom: 5px;
    position: relative;
    font-weight: 400;
}

.discount a::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    opacity: 0;
    pointer-events: none; /* 不干扰原链接的点击交互 */
}

.discount a:hover::after {
    opacity: 1;
}

对应的HTML需要给每个<a>标签添加data-text属性，值为链接文本：

<div class="discount">
      <a href="" data-text="Discount1">Discount1</a>
      <a style="margin-bottom: 20px;" href="" data-text="Discount2">Discount2</a>
      <a href="" data-text="Discount3">Discount3</a>
      <a style="margin-bottom: 20px;" href="" data-text="Discount4">Discount4</a>
      <a href="" data-text="Discount4">Discount4</a>
</div>

方法3：使用可变字体（需字体支持） #

如果项目使用可变字体（如Inter、Roboto等多数现代字体），可以通过font-variation-settings调整字重，不会改变文字宽度：

.discount a{
    margin-bottom: 5px;
    position: relative;
    font-variation-settings: 'wght' 400; /* 正常字重 */
}

.discount a:hover {
    font-variation-settings: 'wght' 700; /* 加粗字重 */
}

方法4：透明占位预留宽度 #

用透明的加粗文本提前占据宽度，hover时仅改变原文本字重，避免尺寸变化：

.discount a{
    margin-bottom: 5px;
    position: relative;
    font-weight: 400;
}

.discount a::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    color: transparent; /* 透明占位，不显示 */
}

.discount a:hover {
    font-weight: 700;
}

同样需要给<a>标签添加data-text属性。

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