折衷的解决方案是使用文本阴影来伪装粗体，例如:

文字阴影:0 0 0.01px黑色;

为了更好地进行比较，我创建了以下示例:

a, li { color: black; text-decoration: none; font: 18px sans-serif; letter-spacing: 0.03em; } li { display: inline-block; margin-right: 20px; color: gray; font-size: 0.7em; } .bold-x1 a.hover:hover, .bold-x1 a:not(.hover) { text-shadow: 0 0 .01px black; } .bold-x2 a.hover:hover, .bold-x2 a:not(.hover){ text-shadow: 0 0 .01px black, 0 0 .01px black; } .bold-x3 a.hover:hover, .bold-x3 a:not(.hover){ text-shadow: 0 0 .01px black, 0 0 .01px black, 0 0 .01px black; } .bold-native a.hover:hover, .bold-native a:not(.hover){ font-weight: bold; } .bold-native li:nth-child(4), .bold-native li:nth-child(5){ margin-left: -6px; letter-spacing: 0.01em; } <ul class="bold-x1"> <li><a class="hover" href="#">Home</a></li> <li><a class="hover" href="#">Products</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> <li>Bold (text-shadow x1)</li> </ul> <ul class="bold-x2"> <li><a class="hover" href="#">Home</a></li> <li><a class="hover" href="#">Products</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> <li>Extra Bold (text-shadow x2)</li> </ul> <ul class="bold-native"> <li><a class="hover" href="#">Home</a></li> <li><a class="hover" href="#">Products</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> <li>Bold (native)</li> </ul> <ul class="bold-x3"> <li><a class="hover" href="#">Home</a></li> <li><a class="hover" href="#">Products</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> <li>Black (text-shadow x3)</li> </ul>

传递给文本阴影非常低的模糊半径值将使模糊效果不那么明显。

一般来说，你重复的文字阴影越多，你的文字就会变得越粗壮，但同时也会失去字母的原始形状。

我应该警告你，将模糊半径设置为分数并不会在所有浏览器中呈现相同的效果!例如，Safari需要更大的值来呈现它，就像Chrome一样。

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

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

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

我喜欢用文本阴影代替。特别是因为您可以使用过渡来动画文本阴影。

你真正需要的是:

a {
  transition: text-shadow 1s;
}
a:hover {
  text-shadow: 1px 0 black;
}

要获得完整的导航，请查看这个jsfiddle: https://jsfiddle.net/831r3yrb/

浏览器支持和更多关于文本阴影的信息: http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

我固定菜单时，悬停粗体成功。它支持响应式，这是我的代码:

(function ($) {
'use strict';

$(document).ready(function () {
    customWidthMenu();
});
$(window).resize(function () {
    customWidthMenu();
});
function customWidthMenu() {
    $('ul.nav li a').each(function() {
        $(this).removeAttr('style');
        var this = $(this);
        var width = this.innerWidth();
        this.css({'width': width + 12});
    });
}})(jQuery);

不是很优雅的解决方案，但“有效”:

a
{
    color: #fff;
}

a:hover
{
    text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}

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