当您更改字体的font-weight时，文本通常会导致轻微的布局偏移。 这是因为粗体文本通常更大并占用更多空间。 有时这无关紧要，例如垂直堆叠的链接，其中更宽/更粗的文本不会推动任何内容。 有时它确实很重要，例如水平行，其中更宽/更粗的文本会将其他元素稍微推开。
鼠标悬停时加粗文本会导致布局偏移，当元素开始换行时尤其明显。 这是一个巧妙的技巧：添加一个隐藏的伪元素，其中包含相同的文本字符串，但将其设置为粗体字号🙌
— Ryan Mulligan (@hexagoncircle) 2020年7月20日
在 @CodePen 上查看： https://#/kBzZXqqtmi pic.twitter.com/kdZBTLQ0RD
Ryan 的技巧非常巧妙。 列表中的每个项目在其上都有一个伪元素，其中包含链接中的确切文本。 该伪元素在视觉上是隐藏的，但已预先加粗并且仍然占用宽度。 因此，当实际链接文本加粗时，它不会占用任何额外的宽度。
它也多少取决于您如何进行布局。 在这里，如果我使用 CSS 网格强制四列，并且文本不会真正挑战宽度，则加粗也不会影响布局
但是，如果我要，比如说，让这些链接流入自动列，我们将遇到偏移问题。
好技巧！
我想提一下另一种方法，即使用等宽（不要与等宽混淆）字体，其中字符在所有字重下都具有相同的宽度。 我喜欢的一种字体是 PT Root UI。 我知道这可能并不总是有效，并且在设计选择方面显然更受限制，但另一方面，我认为它是一个更简洁且不太“hacky”的解决方案。
可访问性方面的影响是什么？ 屏幕阅读器不会重复读取文本吗？
我一直使用 -wekit-text-stroke 来实现这一点。 它看起来不如“真正的”粗体那样好，但在 .1em 下通常还不错，这可能意味着您无需加载额外的字体字重，并且尽管是非标准的，但它在每个浏览器中都受支持。 除了 IE 显然，但您可以使用 @supports 和覆盖来显示实际的粗体字体，或者不在乎 1% 的人不会按预期看到该文本。
伪元素中的文本为 display none，隐藏颜色为白色或类似颜色。 因此用户永远不会看到它.. 只有浏览器知道它在那里并尊重它占用的空间。
我的想法也一样。 对于那些关心 ADA 合规性的人来说，这可能不是一个好的解决方案
屏幕阅读器无法读取伪元素中的内容，因此应该没问题。
我建议使用可变字体，它们不需要任何修复，并且可以完美运行
我多年来一直使用 before 和 after 来进行这种类型的调整……我很高兴您在这里提到了它。 更多人应该了解这一点。 :)
在某些情况下，使用相对定位的主元素和绝对定位的伪元素也很方便。
使用文本阴影用于此目的有什么问题吗？
没有错，但粗体和文本阴影并不是一回事。
我知道它们不是一回事，但视觉上您可以使用文本阴影获得几乎相同的效果，而不会影响 DOM。
是的！ 可以使用文本阴影来实现，但我认为我们无法使用文本阴影来实现与这个想法相同的效果。
字母间距怎么样？ 也许可以找到合适的量来补偿粗体——或者也许只是足够接近，以便它适用于按钮上通常少量字母？
文本描边怎么样？ https://mdn.org.cn/en-US/docs/Web/CSS/-webkit-text-stroke
在移动设备上不起作用。 必须点击几次才能使其加粗
感谢这个技巧.. 这个抖动效果已经困扰我超过 6 个月了..
我使用文本阴影，它更像是一种伪粗体，但可以完成工作，此外您还可以选择不同的阴影
谢谢 Paul。 我使用您的方法获得了最佳结果
text-shadow: 0px 0px 1px var(–slate);
我想知道是否可以将
contain属性用于此目的https://mdn.org.cn/en-US/docs/Web/CSS/contain
如果文本颜色不是纯黑色，我倾向于喜欢这种颜色，我发现悬停时使颜色变暗可以达到与增加字体字重相同的效果，如果差异足够大。 即使没有布局问题，我更喜欢事物不要跳动。 :)
content: attr(data-text) / ” 是什么意思？
它是对空字符串的回退——https://mdn.org.cn/en-US/docs/Web/CSS/content#image_combined_with_text
但是为什么这里需要它？
根据您希望文本的粗细程度，缩放有效，因为它不会更改大小。 我在几个项目中都使用过它。 我们从黑色上的灰色文本更改为白色文本并对其进行了缩放。 效果对我们来说很有效。
a:hover {transform: scale(1.05);
}
到目前为止，这是我实现此目的最喜欢的解决方案。 伪元素就是这样——它们是 CSS 元素，但我不会将它们视为真正的 DOM 元素。 屏幕阅读器不会读取它们，因此人们不应该担心它们会重复读取文本。
但我也想评论一下，截至 2022 年 9 月，@media screen 已弃用且不再受支持 https://www.powermapper.com/tests/screen-readers/content/media-query-speech/
这并不完全正确。 伪元素包含在元素的可访问名称计算中，并且由尊重规范的浏览器/屏幕阅读器组合宣布。
但是，在本例中，此问题通过添加
visibility: hidden得到解决，因为屏幕阅读器将忽略设置了该属性的元素。