CSS悬停文字加粗效果实现方法

本文详细介绍了如何仅用纯CSS实现文字悬停加粗效果：通过`:hover`伪类配合`font-weight`属性（如设默认为`normal`、悬停时为`bold`），即可轻松完成交互式文字变重，无需JavaScript；进一步添加`transition`属性还能让加粗过程平滑自然，提升用户体验；同时提醒读者注意字体字重支持这一关键细节——并非所有字体都具备完整的粗细层级，选用不当可能导致效果失效。

要实现CSS元素在悬停时文字加粗，可以通过 :hover 伪类配合 font-weight 属性来完成。默认情况下文字为正常粗细，鼠标移入时变为加粗，移出后恢复，整个过程无需JavaScript，纯CSS即可实现。

基本语法结构

使用 :hover 选择器定义鼠标悬停状态下的样式，通过设置 font-weight 的值来控制文字粗细变化。

• normal：正常字体粗细（相当于 400）
• bold：加粗（相当于 700）
• 数值形式：如 400、500、600、700 等，数字越大越粗

示例代码

以下是一个简单的按钮文字悬停加粗效果：

<style>
.text {
  font-weight: normal;
  transition: font-weight 0.3s ease; /* 可选：添加平滑过渡 */
}
<p>.text:hover {
font-weight: bold;
}
</style></p><p><p class="text">将鼠标放上来，文字会变粗</p></p>

添加过渡效果更自然

直接切换 font-weight 可能显得生硬，加入 transition 可使加粗过程更流畅。

• 在原始状态设置 transition，而不是 hover 中
• 使用 ease 或 ease-in-out 缓动函数提升体验

注意事项

某些字体可能不支持所有 font-weight 数值，导致加粗无效。建议使用系统常用字体或确保自定义字体包含对应字重文件。

如果字体本身只有 normal 和 bold 两种字重，中间值如 500 将不会生效或被自动映射。

基本上就这些，不复杂但容易忽略细节。

本篇关于《CSS悬停文字加粗效果实现方法》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！