如果不反对使用Javascript，可以在页面显示后设置适当的宽度。以下是我的做法(使用Prototype):

$$('ul.nav li').each(this.setProperWidth);

setProperWidth: function(li)
{
  // Prototype's getWidth() includes padding, so we 
  // have to subtract that when we set the width.
  var paddingLeft = li.getStyle('padding-left'),
      paddingRight = li.getStyle('padding-right');

  // Cut out the 'px' at the end of each padding
  paddingLeft = paddingLeft.substring(0,paddingLeft.length-2);
  paddingRight = paddingRight.substring(0,paddingRight.length-2);

  // Make the li bold, set the width, then unbold it
  li.setStyle({ fontWeight: 'bold' });
  li.setStyle({ width: (li.getWidth() - paddingLeft - paddingRight) + 'px'});
  li.setStyle({ fontWeight: 'normal', textAlign: 'center' });
}

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

text-shadow: 0 0 0.01px;

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

CSS3解决方案-实验性(假大胆)

想分享一个不同的解决方案，没有人在这里建议。有一个属性叫text-stroke，它会很方便。

P跨度:悬停{ -webkit-text-stroke: 1px黑色; ｝ <p>一些东西，< span>hover this，</span> it's cool</p>

在这里，我针对span标签内的文本，我们用黑色像素描边它，这将模拟该特定文本的粗体样式。

注意，这个属性还没有得到广泛的支持，到目前为止(在写这个答案的时候)，似乎只有Chrome和Firefox支持这个属性。有关浏览器支持文本笔画的更多信息，可以参考CanIUse。

只是为了分享一些额外的东西，你可以使用-webkit-text-stroke-width: 1px;如果你不打算为你的笔画设置颜色。

你可以用

<ul>
   <li><a href="#">Some text<span><br />Some text</span></a></li>
</ul>

然后在CSS中，将span content设置为粗体，用可见性隐藏它:hidden，这样它就能保持它的维度。然后，您可以调整以下元素的边距，使其适当适合。

我不确定这种方法是否是SEO友好的。

如果你不想预设列表项的宽度，一个真正好的替代方法是尝试在列表项中使用单宽字体。

与单行字体不同的是，它们仍然是比例字体——但它们在不同的字体权重上占据相同的大小。不需要CSS, JS，或花哨的hack来保持大小不变。它完全融入了字体中。

我认为这是一个很好的解决这个常见问题的方法。

下面是这篇优秀文章中的一个例子，比较了比例字体IBM Plex Sans和uniwidth Recursive。

注意在比例字体(IBM Plex Sans)中，列表项如何随着粗体字体的大小变化而变化。使用单宽字体递归，项目在悬停时变成粗体，但不改变大小。

你可以尝试的免费单宽字体有:

递归 PT根用户界面 “格罗斯”界面 看台上的

还有许多非免费的选项链接到前面提到的文章中。

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

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

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

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