如果您不能设置宽度，那么这意味着宽度将随着文本变得粗体而改变。除了修改每个状态的填充/边距之类的妥协，没有办法避免这种情况。

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

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

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

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

如果您不能设置宽度，那么这意味着宽度将随着文本变得粗体而改变。除了修改每个状态的填充/边距之类的妥协，没有办法避免这种情况。

我用几行javascript解决了这个问题。

$('a.menu_item').each(function() {
    let width = $(this).width();
    $(this).css('width',width + 'px');
});

ul { list-style-marker: none; padding: 0; } li { display: inline-block; } li + li { margin-left: 1em; } a { display: block; position: relative; text-align: center; } a:before, a:after { content: attr(aria-label); text-decoration: inherit; } a:before { font-weight: bold; visibility: hidden; } a:after { position: absolute; left: 0; top: 0; right: 0; bottom: 0; } a:hover:before { visibility: visible; } a:hover:after { display: none; } <ul> <li> <a href="" aria-label="Long-long-long"></a> </li><li> <a href="" aria-label="or"></a> </li><li> <a href="" aria-label="Short"></a> </li><li> <a href="" aria-label="Links"></a> </li><li> <a href="" aria-label="Here"></a> </li> </ul>

另一个想法是使用字母间距

Li, a{显示:inline-block;｝ 一个{ 字体大小:14 px; padding-left: 10 px; padding-right: 10 px; 字母间距:0.235 px ｝ A:悬停，A:焦点{ 粗细:大胆的; 字母间距:0 ｝ < ul > <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> < / ul >