Flex布局字体加粗抖动解决方法

解决方案：基于颜色切换的宽度预留技巧

为了在Flex布局中优雅地解决这一问题，我们可以采用一种反向思维的CSS技巧。核心思想是让元素始终占据其“粗体”状态的宽度，但通过颜色切换来控制用户看到的字体样式。

关键技术点

1. 父元素始终保持粗体宽度： 将item元素本身设置为font-weight: bold，并将其color设置为transparent。这样，item元素从一开始就占据了粗体文本所需的空间，但用户看不到文本。
2. ::before伪元素显示常规文本： 使用::before伪元素来显示原始的、font-weight: normal的文本。这个伪元素通过position: absolute定位到父元素上方，并设置z-index确保其可见性。其content属性可以从父元素的title属性中获取。
3. 激活状态下的颜色反转： 当item元素被激活（例如通过:active伪类）时，将其color设置为可见的颜色（如black），同时将::before伪元素的color设置为transparent。这样，用户会看到父元素的粗体文本，而::before伪元素的常规文本则被隐藏。
4. 徽章的独立样式： 徽章元素（.badge）的font-weight可以独立控制。在非激活状态下，它保持normal；在激活状态下，可以将其设置为bold，但由于徽章的尺寸通常是固定的，其font-weight的变化不会引起布局抖动。

示例代码

以下是实现此效果的完整HTML和CSS代码：

HTML 结构:

<ul class="list">
  <li class="item" title="First">First
    <div class="badge">5</div>
  </li>
  <li class="item" title="Second">Second
    <div class="badge">5</div>
  </li>
  <li class="item" title="Third">Third
    <div class="badge">5</div>
  </li>
</ul>

CSS 样式:

.list {
  display: flex; /* Flex容器，用于排列列表项 */
  gap: 2rem; /* 列表项之间的间距 */
  list-style: none; /* 移除列表默认样式 */
  padding: 0; /* 移除默认内边距 */
  margin: 0; /* 移除默认外边距 */
}

.item {
  display: flex; /* 内部使用Flex布局，用于排列文本和徽章 */
  position: relative; /* 为::before伪元素提供定位上下文 */
  cursor: pointer; /* 鼠标悬停时显示手型光标 */
  font-weight: bold; /* 默认状态下，item元素本身字体加粗 */
  color: transparent; /* 但颜色设置为透明，使其不可见 */
  align-items: center; /* 垂直居中文本和徽章 */
}

.item::before {
  display: block; /* 确保伪元素占据空间 */
  content: attr(title); /* 从父元素的title属性获取内容 */
  /* height: 0; */ /* 这个属性在此场景下不必要，甚至可能干扰 */
  color: black; /* 默认显示黑色常规字体 */
  z-index: 1; /* 确保伪元素在item元素上方 */
  position: absolute; /* 绝对定位到item元素上方 */
  font-weight: normal; /* 伪元素字体为常规，覆盖在透明的粗体文本上 */
  /* 为了精确覆盖，可能需要微调 top/left 属性，但通常默认即可 */
}

.item:active {
  font-weight: bold; /* 激活时保持粗体 */
  color: black; /* 激活时，item元素字体变为黑色可见 */
}

.item:active::before {
  color: transparent; /* 激活时，伪元素字体变为透明，隐藏常规文本 */
}

.badge {
  width: 20px;
  height: 20px;
  background: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: black;
  font-weight: normal; /* 徽章默认字体常规 */
  margin-left: 5px; /* 与文本保持一定间距 */
}

.item:active .badge {
  font-weight: bold; /* 激活时，徽章字体也加粗 */
}

工作原理详解

1. .item 元素: 初始状态下，它被设置为font-weight: bold; color: transparent;。这意味着它在DOM中占据了粗体文本所需要的完整宽度，但由于颜色透明，用户看不到它。同时，display: flex使其内部的文本（由::before覆盖）和.badge可以正确排列。
2. ::before 伪元素: 它通过position: absolute定位在.item元素的上方。content: attr(title)从
3. 的title属性获取文本内容，并以font-weight: normal; color: black;显示。用户此时看到的是这个常规字体的文本。
4. :active 状态: 当用户点击.item时，:active样式生效。.item的color变为black，其内部的粗体文本变得可见。同时，::before伪元素的color变为transparent，隐藏了常规文本。由于.item的宽度从未改变（它始终是粗体宽度），所以整个布局不会发生抖动。
5. .badge 元素: 它的font-weight可以根据.item的:active状态独立调整，而不会影响其固定尺寸，因此不会引起布局抖动。

注意事项与总结

• 语义化： content: attr(title)的使用是为了演示目的。在实际应用中，如果文本内容复杂或需要更好的可访问性，通常会直接将文本放在::before或::after之外，或者考虑使用JavaScript来动态调整。但对于简单的文本切换，这种方式简洁有效。
• height: 0的移除： 在原始问题中，::after伪元素有一个height: 0。在这个解决方案中，::before伪元素是用于显示文本的，因此不应该设置height: 0，否则文本将不可见。
• 兼容性： 这种CSS技巧利用的都是标准CSS属性，具有良好的浏览器兼容性。
• 可访问性： 这种通过颜色切换隐藏内容的方式对屏幕阅读器是友好的，因为文本内容实际上是存在的，只是视觉上被隐藏了。

通过这种巧妙地结合font-weight、color: transparent、伪元素和定位的技巧，我们成功地在Flex布局中实现了动态字体加粗而不引起布局抖动，同时保持了代码的简洁性和可维护性。

到这里，我们也就讲完了《Flex布局字体加粗抖动解决方法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！