双重强调的玩意儿

我以前有一个老板，他 *喜欢*、 **喜欢**、 **喜欢**、 **喜欢** 强调单词。 那是在我们使用所见即所得编辑器之前很久，我必须手工编写那些垃圾代码。

<p>
  I used to have this boss who <em>loved</em>, <strong>loved</strong>, 
  <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> 
  to emphasize words.
</p>

（我们先不提他用来进一步 强调 的颜色。）

编写所有这些标记代码感觉并不好。 当然，它需要花费一些精力，无论如何。 但是，在文本中添加双重甚至更多重强调真的好吗？

不同的标签传达不同的强调

首先，<strong> 和 <em> 标签旨在用于不同的用途。 我们在 HTML5 中获得了它们，在 HTML5 中，

• <strong>: 用于传达 “内容的强烈重要性、严肃性或紧迫性”。
• <em>: 代表 “强调”。

因此，<strong> 使内容更具重量，因为它表明其中的内容很重要或紧急。 例如警告

警告：以下内容已被标记为很棒。

你可能会倾向于使用 <em> 来做同样的事情。 毕竟，斜体文本可以吸引注意。 但它实际上是作为阅读其中的内容时使用更多强调的提示。 例如，以下是同一句子的两个版本，强调位置不同

<p>I ate the <em>entire</em> plate of burritos.</p>
<p>I ate the entire <em>plate</em> of burritos.</p>

这两个例子都强调了强调，但强调的单词不同。 如果你大声朗读它们，它们听起来也会不同。 这使得 <em> 成为在写作中表达语气的绝佳方式。 它改变了句子的意思，而 <strong> 则不会。

视觉强调与语义强调

在强调内容时，你需要权衡这两件事。 例如，有很多情况下，你可能需要将内容设为斜体，而不影响句子的意思。 但这些可以使用其他呈现斜体的标签来处理

• <i>: 这是经典的标签！ 在 HTML5 之前，它用于在整个地方用斜体强调。 现在，它纯粹用于在视觉上将内容设为斜体，而不改变语义含义。
• <cite>: 指示事实或数字的来源。（“来源：CSS-Tricks”）
• <address>: 用于标记联系信息，不仅是物理地址，还包括电子邮件地址和电话号码。（
  [电子邮件保护]
  )

使用 <strong> 也会是一样的。 而不是将其用于为想要更重的文本进行样式设置，最好使用经典的 <b> 标签进行粗体化，以避免对不需要额外意义的内容赋予额外意义。 记住，一些元素（例如标题）在浏览器默认样式的帮助下已经以粗体形式呈现。 无需添加更多强调。

在强调内容中使用斜体（反之亦然）

在某些合法情况下，你可能需要将已经强调的行的一部分设为斜体。 或者可能为已经斜体的文本片段添加强调。

区块引用可能是一个很好的例子。 我经常看到它们被设为斜体以进行样式设置，即使默认浏览器样式不会这样做

blockquote {
  font-style: italic;
}

如果我们需要在该区块引用中提及一部电影名称怎么办？ 应该将其设为斜体。 这里不需要强调，所以可以使用 <i> 标签。 但是，在已经以这种方式呈现的内容中再设为斜体仍然很奇怪

<blockquote>
  This movie’s opening weekend performance offers some insight in
  to its box office momentum as it fights to justify its enormous 
  budget. In its first weekend, <i>Avatar: The Way of Water</i> made 
  $134 million in North America alone and $435 million globally.
</blockquote>

在这种情况下，我们在斜体内容中将某样东西设为斜体，我们应该 *取消嵌套元素的斜体* …… 这种情况下的 <i>。

blockquote i {
  font-style: normal;
}

容器样式查询 将非常有用，如果我们得到它们，就可以捕获所有这些情况

blockquote {
  container-name: quote;
  font-style: italic;
}

@container quote (font-style: italic) {
  em, i, cite, address {
    font-style: normal;
  }
}

这段小代码片段会评估区块引用，查看其 font-style 是否设置为 italic。 如果是，那么它将确保 <em>、<i>、<cite> 和 <address> 元素被呈现为普通文本，同时保留语义含义（如果有）。

但是回到强调中的强调

我不会将 <strong> 嵌套在 <em> 中，像这样

<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>

…或者将 <em> 嵌套在 <strong> 中

<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>

呈现结果很好！ 它们之间的顺序无关紧要…… 至少在现代浏览器中是这样。 Jennifer Kyrnin 提到 某些浏览器只呈现最靠近文本的标签，但在我的有限测试中，我没有遇到过这种情况。 但是要注意！

我不会将一种强调形式嵌套在另一种强调形式中的原因是，这根本没有必要。 没有语法规则要求这样做。 就像感叹号一样，一种强调形式就足够了，你应该使用与你想要实现的目标相匹配的强调形式，无论它是视觉强调、重量强调还是宣布强调。

尽管一些屏幕阅读器能够宣布强调的内容，但它们不会以任何额外的重要性或强调来朗读标记。 因此，据我所知，也没有额外的可访问性优势。

但我真的想要所有的强调！

如果你像我一样，你的老板想要 **所有 的 强调**，我会选择与强调类型相匹配的正确 HTML 标签，然后使用不会影响语义的标签和 CSS 将其余样式应用，以帮助解决浏览器样式无法处理的任何情况。

<style>
  /* If `em` contains `b` or `u` tags */
  em:has(b, u) {
    color: #f8a100;
  }
</style>

<p>
  I used to have this boss who <em>loved</em>, <strong>loved</strong>, 
  <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> 
  to emphasize words.
</p>

我甚至可能使用 <strong> 标签作为防御措施

/* If `em` contains `b` or `u` tags */
em:has(b, u),
/* If `strong` contains `em` or `u` tags */
strong:has(i, u) {
  color: #f8a100;
}

只要我们采取防御措施，我们就可以通过将它们以红色突出显示或其他方式来识别强调嵌套在强调中的错误

/* Highlight semantic emphases within semantic emphases */
em:has(strong),
strong:has(em) {
  background: hsl(0deg 50% 50% / .25);
  border: 1px dashed hsl(0deg 50% 50% / .25);
}

然后，我可能会使用上一节中提到的代码片段，在将元素嵌套在另一个斜体元素中时，删除其默认的斜体样式。

还有其他事吗？

可能

• 确保你的网络字体包含粗体和斜体变体——否则，你将依赖 浏览器为你粗体化或斜体化文本。 但是，为了获得更好的性能，请将字体文件限制为你需要的权重和样式。
• 如果格式看起来不对，请考虑重新编写内容。 有一些自然的方式来措辞内容，以便某些部分获得强调。
• 检查你的分析以查看访客使用的浏览器，并进行相应的测试。 尽管我没有遇到过任何浏览器对 <strong> 在 <em> 中或反之亦然产生错误，但可能存在一个或多个浏览器会这样。