CSS 加粗文本而不改变容器大小

在本文中，我们将介绍如何在 CSS 中加粗文本而不改变其容器的大小。这在设计网页时非常有用，可以使特定文字更加突出，同时保持整个布局的稳定。我们将通过示例说明不同的方法和技巧。

阅读更多：CSS 教程

使用font-weight属性加粗文本

最常见的方法是使用CSS的font-weight属性来加粗文本。该属性接受以下值：

normal: 默认值，不加粗文本
bold: 加粗文本
bolder: 更加加粗文本（相对于父元素的字重）
lighter: 更加细化文本（相对于父元素的字重）
100 – 900: 具体的数字值定义字重

要加粗文本而不改变容器的大小，我们只需要将font-weight属性应用于文本所在的元素，而不是应用于包含文本的整个容器。

<p>这是一个 <span class="bold-text">加粗文本</span> 的示例。</p>

<style>
.bold-text {
  font-weight: bold;
}
</style>

在上面的例子中，我们给包含”加粗文本”的元素添加了.bold-text的类，并将该类的font-weight设置为bold。这将只会加粗该span元素内的文本内容，而不会影响文本所在的段落

的大小。

使用text-decoration属性模拟加粗效果

除了使用font-weight属性，我们还可以使用text-decoration属性来模拟加粗效果。这种方法可以使文本看起来更加粗体，但实际上并没有真正改变字体的粗细。

<p>这是一个 <span class="bold-text">加粗文本</span> 的示例。</p>

<style>
.bold-text {
  text-decoration: underline;
}
</style>

在上面的例子中，我们将.bold-text类的text-decoration属性设置为underline。这将在加粗文本下方添加一个下划线，使其更加突出。

使用伪元素模拟加粗效果

除了上述两种方法，我们还可以使用伪元素:before和:after来模拟加粗效果。这种方法可以给文本添加额外的装饰，使其看起来更加加粗。

<p>这是一个 <span class="bold-text">加粗文本</span> 的示例。</p>

<style>
.bold-text:before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 1px;
  background-color: black;
  vertical-align: middle;
  margin-right: 5px;
}

.bold-text:after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 1px;
  background-color: black;
  vertical-align: middle;
  margin-left: 5px;
}
</style>

在上面的例子中，我们使用伪元素:before和:after给.bold-text类的文本前后添加了一条水平线。通过设置宽度、高度、背景颜色和外边距等样式，我们可以调整加粗效果的外观和大小。