CSS 文字加粗

在网页设计中，文字加粗是一种常见的需求，可以通过CSS轻松实现。主要的解决方案是使用font-weight属性来调整字体的粗细程度。下面将几种实现文字加粗的方法。

方法一：使用 font-weight 属性

最直接的方式是通过CSS中的font-weight属性来设置文字的粗细。font-weight可以接受不同的值，如normal、bold、数字（100到900）等。以下是具体的代码示例：

css
/* HTML */</p>

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

<p>/* CSS <em>/
.bold-text {
    font-weight: bold; /</em> 或者使用 700 */
}

在这个例子中，font-weight: bold;会让文本变粗。如果你需要更精细的控制，可以使用从100到900的数值，其中400等同于普通粗细，700等同于加粗。

方法二：使用 b 标签或 strong 标签

除了CSS，HTML本身也提供了让文字加粗的标签。<b>标签和<strong>标签都可以使文字加粗。

html
<b>这是用b标签加粗的文字。</b>
<strong>这是用strong标签加粗的文字。</strong>


虽然两者都能加粗文字，但语义上有所不同。<strong>表示重要性增加，通常浏览器会以粗体显示，而<b>仅用于样式上的加粗，没有特别的语义意义。

方法三：结合伪类使用

有时候我们可能只希望鼠标悬停时文字才变粗，这可以通过CSS伪类:hover来实现。

css
/* HTML */</p>

<p class="hover-bold">将鼠标悬停在此处。</p>

<p>/* CSS */
.hover-bold:hover {
    font-weight: bold;
}

这样当用户将鼠标悬停在指定的段落上时，文字就会变粗。

注意事项

需要注意的是，并不是所有的字体都支持所有的font-weight值。如果指定的权重不可用，浏览器会选择最接近的可用权重。在使用<b>和<strong>标签时，应考虑语义化的需求，确保页面内容对辅助技术（如屏幕阅读器）友好。

通过CSS的font-weight属性、HTML的<b>和<strong>标签以及结合伪类等多种方式，可以灵活地实现文字加粗的效果，满足不同的设计需求。