如何在CSS中实现鼠标悬停时更改按钮字体？

当然可以实现！你只需要利用CSS的:hover伪类，搭配font-family属性就能完成这个效果。

示例代码： #

HTML结构：

<button class="hover-font-btn">悬停我看看字体变化</button>

CSS样式：

/* 按钮的基础样式 */
.hover-font-btn {
  padding: 8px 16px;
  font-family: Arial, sans-serif; /* 初始字体 */
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 鼠标悬停时的样式 */
.hover-font-btn:hover {
  font-family: 'Courier New', monospace; /* 悬停时切换的字体 */
}

补充说明： #

• 如果你想用的是自定义字体（比如非系统自带的字体），需要先通过@font-face规则引入字体文件，再在font-family中指定对应的字体名称。
• 确保指定的字体在用户的设备上是可用的，或者提前做好字体降级方案（比如示例中sans-serif、monospace就是降级备选）。

内容的提问来源于stack exchange，提问作者Adrian