更改字体粗细时如何停止悬停文本移动？

Question

更改字体粗细时如何阻止文本在悬停时移动？

我的标准

<a>

有一个

font-weight: 300

，然后悬停时更改为

font-weight: 700

，这会导致文本移动，您如何解决这个问题？

Answer 1

不要更改字体粗细或字母间距。 （当然，您可以使用字体粗细和所有内容来设置字体样式，但不要在 :hover 上更改它）。

为了使文本在鼠标悬停时更加粗体/可见，只需将 text-shadow 添加到 :hover 样式即可。这不会移动文本，而只是在其周围添加边框。

例如：

text-shadow: 1px 0 black;

或者（更大胆的风格）：

text-shadow: 1px 0 black, -1px 0 black, 0 -1px black, 0 1px black;

Answer 2

这很hacky，但是由于字体变粗而改变了单词的总宽度，所以你可以像这样缩短字母之间的间距

a {
            text-decoration: none;
            font-size: 25px;
            display: block;
            padding: 20px;
            font-weight: 300;

            &:hover {
                font-weight: 700;
                letter-spacing: -.2px;
            }
        }

Answer 3

另一个技巧是使用

opacity

来突出显示差异。

Answer 4

由于字体粗细发生变化，单词的宽度增加，导致其移动。增加非悬停链接中的字母间距将得到所需的结果。

    a {
        text-decoration: none;
        font-size: 25px;
        display: block;
        padding: 20px;
        font-weight: 300;
        letter-spacing: 1.25px;
        &:hover {
            font-weight: 700;
            letter-spacing: 1px;
        }
    }