我使用文本阴影解决方案，其他一些提到这里:

text-shadow: 0 0 0.01px;

不同之处在于我没有指定阴影颜色，所以这个解决方案适用于所有字体颜色。

我可以给你两种建议

第一个选项:是将每个列表项的宽度设置为%

这里有一个简单的例子

<ul>
  <li><a href="#">First Item</a></li>
  <li><a href="#">Second Item</a></li>
  <li><a href="#">Third Item</a></li>
  <li><a href="#">Fourth Item</a></li>
</ul>

li {
  list-style-type: none;
  display: inline-block;
  width: 24%;
}

a {
  text-decoration: none;
  color: #333;
  font-size: 1.4em;
  background: #A5C77F;
  display: block;
  padding: 10px 15px;
  margin: 10px 0;
  border-right: 1px solid whitesmoke;
  transition: font-weight .3s;
}

a:hover {
  font-weight: bold;   
}

第二种选择:在活动元素上使用文本阴影

text-shadow: 0 0 .65px #333, 0 0 .65px #333;

但我建议使用第一个选项，即为每个元素指定一个百分比的宽度，因为文本阴影并不总是在移动浏览器中工作

你可以使用"margin"属性:

li a {
  margin: 0px 5px 0px 5px;
}

li a:hover {
  margin: 0;
  font-weight: bold;
}

只要确保左右边距足够大，以便额外的空间可以包含粗体文本。对于较长的单词，可以选择不同的页边距。 这只是另一种解决方法，但为我做了工作。

我建议不要在hover时切换字体(°)。在这种情况下，只是菜单项移动了一点，但我曾见过由于扩大导致额外的换行导致整个段落重新格式化的情况。你不希望看到这种情况发生时，你所做的唯一的事情是移动光标;如果你什么都不做，页面布局应该不会改变。

在正常和斜体之间切换时也会发生偏移。我会尝试改变颜色，或者切换下划线，如果你有文字下面的空间。(下划线应该远离底部边框)

如果我在窗体设计课上使用切换字体，我会被嘘的:-)

字体这个词经常被误用。“Verdana”是一种字体，“Verdana normal”和“Verdana bold”是同一字体的不同字体。

试试这个:

.nav {
  font-family: monospace;
}

另一种方法是通过文本阴影“模拟”粗体文本。这有一个额外的好处(/malus，取决于你的情况)，也适用于字体图标。

   nav li a:hover {
      text-decoration: none;
      text-shadow: 0 0 1px; /* "bold" */
   }

有点俗气，尽管它可以避免重复文本(如果文本很多，这很有用，就像我的情况一样)。