HOWTO · HTML

在 HTML 中创建粗体文本

本教程介绍如何在 HTML 中创建粗体文本。

作者 Rajeev Baniya发布于 2022-01-02更新于 2026-10-26
本页内容

要在 HTML 中将文字加粗：文字本身很重要时使用 <strong>；需要引起注意但不表示更重要时使用 <b>；需要控制视觉字重时使用 CSS font-weight。这些方式对含义和外观的影响不同，请根据内容选择合适的方式。 (strong)

使用 标记具有语义重要性的文字

当文字在上下文中具有较高的重要性、紧迫性或严肃性时，使用 <strong>。浏览器通常会默认将其显示为粗体；无论样式如何变化，这个元素都会表达相应的含义。

<p><strong>Save your changes before closing the page.</strong></p>

即使样式表改变了句子的外观，它仍会被标记为重要内容。这里应将整句话放在 <strong> 中，因为整条指示都很重要。

运行此示例：

const message = "Save your changes";
console.log(`<strong>${message}</strong>`);

这个 JavaScript 示例会将 HTML 片段作为文本输出；它不会渲染浏览器页面。此处未执行该示例。

使用 引起风格上的注意

使用 <b> 引起读者对某些文字的注意，但不表示这些文字更加重要。例如，它可以标出读者应留意的关键词或标签。<b> 是有效的 HTML 元素；当这种提示比 <strong> 所表达的较强语义更合适时，可以选择它。

<p>Search results for <b>CSS selectors</b></p>

如果文字本身具有重要性，例如警告内容，应改用 <strong>。两者的视觉效果可能相似，但表达的语义目的不同。

使用 CSS font-weight 控制视觉字重

如果目标是调整视觉样式，请设置 CSS 属性 font-weight。一次性调整时，行内样式很方便；CSS 类则可以重复使用，并在样式表中统一修改。

<p style="font-weight: bold;">This text is bold.</p>

<style>
.bold-text {
  font-weight: bold;
}
</style>
<p class="bold-text">This text uses a reusable class.</p>

normal 表示采用正常字重；bold 表示采用粗体。bolder 和 lighter 表示相对于父元素的字重。最终显示的字重取决于字体提供了哪些字形，因此这些值并不保证在每种字体中都呈现出明显不同的字重。

将语义化 HTML 与 CSS 样式结合使用

用语义化标记表达含义，用 CSS 控制外观。如果重要文字还需要特定字重，可以用 <strong> 包住这些文字，再为该元素或其 CSS 类设置样式。

<style>
.important {
  font-weight: 700;
  color: darkred;
}
</style>

<p>Before submitting, read the <strong class="important">confirmation message</strong>.</p>

这里，<strong> 表明这条消息很重要；CSS 类控制其字重和颜色。如果文字只需要视觉样式，并无特别重要的含义，则应用 CSS 类即可，无需添加语义强调。

粗体文本与无障碍

将文本加粗纯粹是一种视觉效果：屏幕阅读器不会播报 <b> 元素，也不会播报 CSS font-weight 的变化。如果粗体文本对理解内容至关重要——例如警告、关键术语或必填字段——请使用 <strong> 对其进行标记，以便辅助技术能够传达其重要性，并且切勿仅依靠粗体来承载含义。

关于作者

Rajeev Baniya

查看作者主页