html - 更改字体粗细时如何停止悬停文本？

Question

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

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

CODE PEN DEMO

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

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

Answer 1

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

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

例如:

text-shadow: 1px 0 black;

或(更大胆的风格):

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