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

文字阴影: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一样。

通过使用一个不可见的伪元素预先设置宽度，该伪元素具有与父悬停样式相同的内容和样式。使用数据属性(如title)作为内容的源。

li { display: inline-block; font-size: 0; } li a { display:inline-block; text-align:center; font: normal 16px Arial; text-transform: uppercase; } a:hover { font-weight:bold; } /* SOLUTION */ /* The pseudo element has the same content and hover style, so it pre-sets the width of the element and visibility: hidden hides the pseudo element from actual view. */ a::before { display: block; content: attr(title); font-weight: bold; height: 0; overflow: hidden; visibility: hidden; } <ul> <li><a href="#" title="height">height</a></li> <li><a href="#" title="icon">icon</a></li> <li><a href="#" title="left">left</a></li> <li><a href="#" title="letter-spacing">letter-spacing</a></li> <li><a href="#" title="line-height">line-height</a></li> </ul>

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

(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);

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

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>

我遇到过和你类似的问题。我想让我的链接变得粗体时，你悬停在他们，但不仅在菜单，而且在文本。正如你可以猜到的，这将是一个真正的苦差事，找出所有不同的宽度。解决方法很简单:

创建一个框，其中包含粗体的链接文本，但颜色像你的背景，但你的真实链接在上面。下面是我个人主页上的一个例子:

CSS:

.hypo { font-weight: bold; color: #FFFFE0; position: static; z-index: 0; }
.hyper { position: absolute; z-index: 1; }

当然，你需要将#FFFFE0替换为页面的背景色。z索引似乎没有必要，但我还是放了它们(因为“hypo”元素将出现在HTML-Code中的“hyper”元素之后)。现在，在你的页面上放一个链接，包括以下内容:

HTML:

You can find foo <a href="http://bar.com" class="hyper">here</a><span class="hypo">here</span>

第二个“这里”将是不可见的，隐藏在你的链接下面。因为这是一个静态的盒子 你的粗体链接文本，你的其余文本不会再移动，因为它已经移动之前，你悬停在链接。