HTML导航栏hover时文字加粗致其他选项偏移，如何调整padding解决

问题根源 #

字体从常规字重切换到加粗时，字符实际渲染宽度会增加，导致导航选项的整体宽度变大，从而挤压相邻选项产生移位。

方案1：用text-stroke模拟加粗（最推荐，无需调整padding） #

该方案不会改变文字实际占位宽度，完全避免移位问题，视觉上和原生加粗几乎无差别，兼容所有现代浏览器：

.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  /* 兼容默认状态 */
  -webkit-text-stroke: 0px transparent;
}

.topnav a:hover {
  /* 原代码这里颜色值错误，且少了分号，已修正 */
  background-color: #222;
  color: white;
  /* 删掉原来的font-weight:700，添加下面的属性，0.2-0.5px可根据视觉效果调整 */
  -webkit-text-stroke: 0.3px currentColor;
}

方案2：预占宽度（适合需要原生加粗效果的场景） #

通过伪元素提前预占加粗后的文字宽度，hover时整体宽度不会变化：

.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  position: relative;
}
.topnav a::before {
  content: attr(data-text);
  font-weight: 700;
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

对应HTML需要给每个a标签加data-text属性：

<a data-text="Home" href="index.html">Home</a>

方案3：调整padding抵消宽度变化（符合你提到的调整padding的思路） #

先测试当前字体下，导航选项文字加粗后总宽度增加了多少，比如总宽度多了2px，就把hover时的左右padding各减1px，抵消文字变宽的尺寸：

.topnav a:hover {
  background-color: #222;
  color: white;
  font-weight: 700;
  /* 原padding是14px 16px，左右各减1px，总宽度减少2px刚好抵消文字加粗的增量 */
  padding: 14px 15px;
}

注意：该方案需要根据你实际使用的字体测量宽度增量，不同字体加粗后的宽度变化不同。

原代码其他问题修正 #

1. 不要在a标签外套<b>标签设置当前页加粗，会导致样式优先级混乱，建议给当前页a标签加active类统一控制：

.topnav a.active {
  /* 和hover保持相同的加粗逻辑即可 */
  -webkit-text-stroke: 0.3px currentColor;
}

<div class="topnav">
  <a class="active" href="index.html">Home</a>
  <a href="ComingSoon/index.html">Coming Soon</a>
  <a href="VideoLibrary/index.html">Video Library</a>
  <a href="CastAndCrew/index.html">Cast and Crew</a>
</div>

2. 路径中的反斜杠\建议改成正斜杠/，避免部分服务器解析异常。

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