CSS技巧：在Flex布局中实现字体加粗不抖动且带徽章

本文探讨了在Web开发中，如何在Flex布局下实现元素字体加粗时避免内容抖动，并同时集成一个固定大小的徽章。核心解决方案是利用CSS伪元素（::before）和颜色透明度技巧，预先为加粗文本预留空间，并通过切换前景与伪元素的颜色来模拟加粗效果，确保布局的稳定性，即使在复杂的交互场景中也能保持流畅的用户体验。

在用户界面设计中，当用户与元素交互时（例如点击或悬停），我们经常需要改变元素的样式，其中一种常见的需求是将文本加粗。然而，直接应用 font-weight: bold 常常会导致文本宽度发生变化，进而引起周围内容发生位移或“抖动”，影响用户体验。当设计中还包含如徽章（badge）等伴随元素，并且整体布局采用 display: flex 时，这一问题会变得更加复杂。

字体加粗导致布局抖动的原因

文本加粗通常会增加字符的宽度，即使是相同的字符，其加粗后的像素宽度也可能大于普通字体。当一个元素的 font-weight 从 normal 变为 bold 时，其占据的水平空间可能会随之改变，如果该元素是 inline 或 inline-block 类型，并且没有预留足够的空间，就会挤压或拉伸相邻元素，导致整个布局发生重排。

传统解决方案及其在Flex布局下的挑战

一种常见的CSS技巧是利用伪元素（::after 或 ::before）来预先为加粗文本预留空间。基本思路是：

立即学习“前端免费学习笔记（深入）”；

1. 创建一个与主文本内容相同的伪元素。
2. 将伪元素的 font-weight 设置为 bold。
3. 通过设置 height: 0、opacity: 0 或 visibility: hidden 等方式将其隐藏，但其宽度依然会影响父元素。
4. 当主元素被激活时，再将其 font-weight 设置为 bold。

这种方法在 display: inline-block 的场景下可以有效防止抖动。然而，当父元素需要使用 display: flex 来布局其子元素（例如，在文本旁边放置一个徽章）时，这种伪元素技巧可能会失效，因为 flex 容器的子元素（flex items）的布局行为会受到 flex 属性的严格控制，伪元素的隐藏宽度可能无法正确地被计算或应用。

结合伪元素与颜色透明度的增强解决方案

为了解决在 display: flex 环境下，既要实现字体加粗不抖动，又要正确显示徽章的问题，我们可以采用一种更精妙的伪元素和颜色透明度结合的策略。核心思想是：让主元素始终占据加粗文本所需的空间，然后通过切换颜色来控制显示的是普通文本还是加粗文本。

腾讯智影-AI数字人

基于AI数字人能力，实现7*24小时AI数字人直播带货，低成本实现直播业务快速增增，全天智能在线直播

73

查看详情

核心思路

1. 主元素预留加粗空间： 将主元素的 font-weight 始终设置为 bold，并将其 color 初始设为 transparent，使其占据加粗后的宽度，但内容不可见。
2. 伪元素显示普通文本： 创建一个 ::before 伪元素，其 content 与主文本相同，font-weight 为 normal，并将其 color 设为可见色（如 black）。通过 position: absolute 将其精确覆盖在主元素上。
3. 交互时颜色反转： 当主元素被激活时（例如 :active 或 :hover），将其 color 设为可见色，同时将 ::before 伪元素的 color 设为 transparent。这样，就实现了从普通文本到加粗文本的无缝切换，而元素的总宽度始终保持不变。
4. 徽章的集成： 徽章作为一个独立的子元素，其大小固定，只需在激活时改变其自身的 font-weight 即可。

示例代码

以下是实现这一方案的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>

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

.item {
  display: flex; /* 使文本和徽章在同一行 */
  position: relative; /* 为伪元素定位提供参考 */
  cursor: pointer; /* 鼠标悬停时显示手型光标 */
  font-weight: bold; /* 默认分配加粗后的宽度 */
  color: transparent; /* 初始时隐藏加粗文本 */
  align-items: center; /* 垂直居中对齐徽章 */
}

.item::before {
  display: block; /* 使伪元素占据独立行 */
  content: attr(title); /* 从title属性获取文本内容 */
  /* height: 0; */ /* 这里的height:0是不需要的，因为position:absolute会脱离文档流 */
  color: black; /* 初始时显示普通文本 */
  z-index: 1; /* 确保伪元素在主元素上方 */
  position: absolute; /* 绝对定位覆盖主元素 */
  font-weight: normal; /* 伪元素显示普通粗细 */
  /* 注意：伪元素的宽度会根据其内容自动调整，因为它脱离了文档流。
     主元素的color: transparent使其内容不可见，但其bold的宽度依然存在，
     伪元素只是覆盖在其上方，不影响主元素所占据的整体宽度。 */
}

.item:active {
  font-weight: bold; /* 确保主元素仍是bold */
  color: black; /* 激活时显示主元素的加粗文本 */
}

.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; /* 徽章与文本的间距 */
  flex-shrink: 0; /* 防止徽章在flex容器中被压缩 */
}

.item:active .badge {
  font-weight: bold; /* 激活时徽章文本加粗 */
}

关键点解析

1. item 元素：

   • display: flex;: 允许其内部的文本（由伪元素和实际文本共同组成）和徽章并排显示。
   • position: relative;: 为其 ::before 伪元素的 position: absolute 提供定位上下文。
   • font-weight: bold; color: transparent;: 这是核心。font-weight: bold 确保了 item 元素一开始就占据了加粗文本所需的全部宽度，避免了后续因加粗导致的宽度变化。color: transparent 则让其内容在初始状态下不可见。
   • align-items: center;: 确保徽章与文本垂直居中对齐。

2. item::before 伪元素：

   • content: attr(title);: 从 <li> 元素的 title 属性获取文本内容。这避免了在HTML中重复文本，并确保伪元素内容与主文本一致。
   • position: absolute; z-index: 1;: 使伪元素脱离文档流，并浮动在 item 元素上方。
   • font-weight: normal; color: black;: 伪元素显示的是普通粗细的文本，且初始可见。
   • height: 0; 在此方案中不再需要，因为伪元素通过 position: absolute 覆盖，其高度不会影响父元素的布局。

3. :active 状态：

   • item:active { color: black; }: 当 item 被激活时，将其 color 设为 black，从而显示出其内部预设的加粗文本。
   • item:active::before { color: transparent; }: 同时，将伪元素的 color 设为 transparent，使其隐藏。通过这种颜色切换，实现了视觉上的加粗效果，而 item 元素的总宽度始终未变。

4. .badge 元素：

   • flex-shrink: 0;: 确保徽章在 flex 容器中不会被压缩，保持其固定大小。
   • font-weight: normal; 和 item:active .badge { font-weight: bold; }: 徽章内部的数字也通过切换 font-weight 来实现加粗效果，由于徽章本身大小固定，这种改变不会引起抖动。

注意事项与总结

• 文本内容管理： 这种方法依赖于将文本内容存储在HTML元素的 title 属性中，并通过 attr(title) 来引用。这意味着文本内容在HTML中实际上出现了两次（一次在 title 属性，一次在 <li> 标签内部）。如果文本内容复杂或需要国际化，可能需要考虑更复杂的JavaScript辅助方案来动态设置 content。
• 可访问性： 屏幕阅读器通常会读取元素的实际文本内容，而非伪元素。在这种方案中，<li> 标签内部的文本是 First，而 title 属性也是 First。确保两者一致有助于可访问性。
• 性能： 这种方案主要利用CSS属性切换，性能开销非常小。
• 浏览器兼容性： 所使用的CSS属性（::before, position, color, font-weight, display: flex 等）具有广泛的浏览器支持。

通过上述增强型CSS技巧，我们可以在 display: flex 布局中优雅地实现字体加粗效果，同时避免布局抖动，并能灵活地集成其他伴随元素（如徽章），从而提供更流畅、专业的交互体验。

以上就是CSS技巧：在Flex布局中实现字体加粗不抖动且带徽章的详细内容，更多请关注php中文网其它相关文章！