悬停.servNavItemTitle时其他同元素字体权重异常波动问题求助

我之前也碰到过类似的字体渲染小坑，咱们来一步步搞定它：

问题根源 #

这个现象其实是浏览器字体渲染优化的副作用：当你悬停元素时，.servNavItemTitle的颜色发生了变化，浏览器在重绘这些元素的瞬间，会短暂切换字体的抗锯齿渲染模式（比如从亚像素抗锯齿切换到灰度抗锯齿），这就导致未悬停的标题看起来字重突然变轻，等浏览器完成重绘后又恢复正常。虽然你的代码里没有直接修改font-weight，但颜色变化触发的重绘间接引发了这个视觉异常。

修复方案 #

下面几个方法任选其一就能解决问题：

1. 明确固定字重值

给所有.servNavItemTitle明确设置font-weight，避免浏览器自动调整字体渲染逻辑：

.servNavItemTitle {
  margin-top: 5px;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
  font-weight: 400; /* 可根据你的需求调整为500、600等 */
}

2. 强制统一字体渲染模式

通过CSS强制浏览器保持亚像素抗锯齿渲染，避免渲染模式切换：

.servNavItemTitle {
  -webkit-font-smoothing: subpixel-antialiased;
  font-smoothing: subpixel-antialiased;
}

3. 统一字体继承属性

检查父元素是否有不一致的字体样式继承，确保所有.servNavItemTitle的字体家族、字重等属性完全统一，消除渲染时的不确定性。

验证效果 #

修改后再悬停标题，你会发现其他标题的字重不会再出现短暂降低的闪烁问题了。

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