HTML 加粗与斜体：strong、b、em 和 i 标签

如何在 HTML 中让文字加粗

把文字放进 <strong> 或 <b> 里，两者都会让文字加粗：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bold</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
  </style>
</head>
<body>
  <p><strong>Warning:</strong> unplug the device before opening it.</p>
  <p>The <b>Pro</b> plan includes offline mode.</p>
</body>
</html>

它们看起来完全一样，区别在于它们对文字含义的表达。

strong 和 b 的区别

如果你说话时会提高音量，或者希望读者一定不要错过，就选 <strong>。如果加粗只是这类文字的视觉惯例，就选 <b>。如果两者都不合适，你只是想要一种样式，就用带类名的 <span> 加上 CSS。

斜体：em 和 i

斜体的这一对标签遵循同样的思路：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Italics</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
  </style>
</head>
<body>
  <p>I <em>never</em> said she took the money.</p>
  <p>I never said <em>she</em> took the money.</p>
  <p>The word <i lang="fr">déjà vu</i> comes from French, and the ship was the <i>Endurance</i>.</p>
</body>
</html>

上面前两句话用词完全相同，却因为 <em> 的位置不同而意思不同。当 <i> 标记的是另一种语言的短语时，加上 lang 属性，让屏幕阅读器能正确发音。

还有几个标签默认也显示为斜体：<cite>（作品标题）、<dfn>（正在定义的术语）、<address> 和 <var>。合适的时候就用它们，让默认样式来处理其余部分。

同时加粗和倾斜

把一个标签嵌套在另一个里面，并按相反的顺序关闭：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bold italic</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
  </style>
</head>
<body>
  <p><strong><em>Bold and italic</em></strong></p>
  <p><em>Italic with a <strong>bold</strong> word inside</em></p>
  <p><b><i>b and i together</i></b></p>
</body>
</html>

<strong><em>text</strong></em>（关闭顺序错误）仍然能显示，但浏览器必须修复元素树，可能会把你的元素拆开；这种修复是什么样子，请参阅标签页面。

用 CSS 设置加粗和斜体

当样式纯粹是视觉效果时（卡片标题、价格、标签），直接在元素上使用 CSS，而不是额外加一个标签。font-weight 控制加粗，font-style 控制斜体：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS bold and italic</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .price { font-weight: bold; color: #16a34a; }
    .semi { font-weight: 600; }
    .note { font-style: italic; color: #4b5563; }
    .calm strong { font-weight: normal; color: #dc2626; }
  </style>
</head>
<body>
  <p>Price: <span class="price">$12</span></p>
  <p class="semi">font-weight: 600</p>
  <p class="note">A note set in italics with font-style.</p>
  <p class="calm"><strong>Still strong</strong>, shown in red instead of bold.</p>
</body>
</html>

最后一行说明了语义和外观是分开的：<strong> 保留了它的语义，而 CSS 给了它不同的样式。完整的字重范围（100 至 900）在 CSS font-weight 页面中有介绍。

无障碍

在默认设置下，大多数屏幕阅读器不会因为 <strong> 或 <em> 而改变语调，所以加粗和斜体主要是视觉提示。用户绝不能错过的信息（错误、必填字段、截止日期）应该通过文字本身表达清楚，而不能只靠样式。也要避免大段的斜体或粗体：它们更难阅读，对有阅读障碍的读者尤其如此。

常见错误

• 把粗体当作标题。 一个小节上方的一行 <b> 文字，对屏幕阅读器来说并不是标题。请使用 <h2> 或 <h3>，再设置样式。
• 用 <strong> 来设置样式。 如果文字没有什么重要之处，就用 <b> 或 CSS。
• 把整个段落加粗。 强调只有在少用时才有效。加粗一个短语，而不是整个段落。
• 关闭标签的顺序错误。 要写 <b><i>x</i></b>，绝不能写 <b><i>x</b></i>。
• 过时的标签。 旧教程里的 <font> 标签已经废弃。请使用上面的标签或 font-weight。