解决Flex布局中动态字体加粗导致的布局抖动问题

本文探讨了在flex布局中，当元素字体加粗时避免内容抖动的css技巧。通过巧妙利用`font-weight: bold`、`color: transparent`和`::before`伪元素，结合`position: absolute`和`z-index`，我们实现了在不影响布局的情况下，动态切换文本显示状态，并同时支持徽章元素的样式调整。

在网页开发中，动态改变文本的font-weight（如从normal到bold）是一个常见的需求，例如在点击菜单项或激活某个状态时。然而，由于粗体文本通常比常规文本占用更多的水平空间，这种改变会导致周围内容发生不期望的布局抖动（layout shift）。传统的解决方案是利用::after伪元素预先渲染粗体文本以计算其宽度，并通过opacity: 0或visibility: hidden将其隐藏，从而使父元素始终保持粗体文本的宽度。但当父元素需要使用display: flex来排列内部元素（例如文本和旁边的徽章）时，这种::after伪元素技巧可能会失效，因为它会干扰Flex布局的计算。

挑战：Flex布局与字体加粗的冲突

当一个<li>元素既包含文本又包含一个badge（徽章）<div>，并且我们希望它们通过display: flex水平排列时，如果直接在<li>上应用::after伪元素来预留粗体宽度，并同时将<li>设置为display: flex，::after的行为可能会变得不可预测或无法达到预期效果，导致内容依然抖动。这是因为::after伪元素作为inline-block或block元素，在Flex容器中会被视为一个Flex项，其宽度计算和定位逻辑会与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代码：

千面视频动捕

千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

27

查看详情

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)从<li>的title属性获取文本内容，并以font-weight: normal; color: black;显示。用户此时看到的是这个常规字体的文本。
3. :active 状态: 当用户点击.item时，:active样式生效。.item的color变为black，其内部的粗体文本变得可见。同时，::before伪元素的color变为transparent，隐藏了常规文本。由于.item的宽度从未改变（它始终是粗体宽度），所以整个布局不会发生抖动。
4. .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布局中动态字体加粗导致的布局抖动问题的详细内容，更多请关注php中文网其它相关文章！