Question

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

我的标准<a>有font-weight: 300，然后悬停更改为font-weight: 700，这会导致文字移动，你如何解决这个问题？

HTML

<ul class="clearfix">
  <li><a href="">Testing 1</a></li>
  <li><a href="">Testing 2</a> </li>
  <li><a href="">Testing 3</a> </li>
  <li><a href="">Testing 4</a> </li>
</ul>

CSS：

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.clearfix {
  display: inline-block;
}

/* start commented backslash hack \*/
* html .clearfix {
  height: 1%;
}

.clearfix {
  display: block;
}

/* close commented backslash hack */
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  background: #c2c2c2;
  font-family: 'Roboto Slab', serif;
}
ul li {
  float: left;
  display: block;
  border-left: 1px solid #eeeff2;
}
ul li a {
  text-decoration: none;
  font-size: 25px;
  display: block;
  padding: 20px;
  font-weight: 300;
}
ul li a:hover {
  font-weight: 700;
}

Answer 1

这很麻烦，但由于字体变粗会改变单词的总宽度，你可以缩短字母之间的间距，这样就可以了

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

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

Answer 2

抱歉，我必须得到另一个答案。我的坏了

Answer 3

请勿更改字体粗细或字母间距。（当然你可以像使用font-weight和所有内容一样设置字体样式，但不要改变它：hover）。

为了使文本在鼠标悬停时更加醒目/可见，只需将文本阴影添加到：悬停样式即可。这不会移动文本，只是在其周围添加边框。

例如：

text-shadow: 1px 0 black;

或（更大胆的风格）：

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

Answer 4

也许在对象（li）上设置宽度？

Answer 5

由于字体粗细正在改变，因此字的宽度增加，导致字体移动。增加非悬停链接中的字母间距将产生所需的结果。

    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;
        }
    }

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

5 个答案: