如何使文本斜体

HTML 和 CSS 为我们提供了使文本斜体的能力。 我指的是像 这样 的文本。 让我们一起了解您需要知道的一切。

什么是斜体文本？为什么要使文本斜体？

您最常使用斜体文本来引起人们的注意。 实际上是为了强调一个词，以便读者在阅读句子时会对那个词或短语给予一些额外的 强调，正如您作为作者的意图。 或者，它也可能是遵循特定的风格指南，例如将某件事的标题斜体化，比如已发表的文章。

使用 <em> 标签

<em> 中的“em”实际上代表 强调。 默认情况下，浏览器会使包裹在 HTML <em> 标签中的文本斜体。

<p>
  That was a <em>wonderful</em> party, Bebe.
</p>

想象一下这个句子的 声音，读者强调了那个词，使得句子与他们没有强调时相比具有不同的感觉。

使用 <i> 标签

<i> 元素用于将文本斜体化，但不暗示强调。 它用于在视觉上将一些文本与其他文本区分开来，但不暗示读者对这些词施加额外的权重。 比如：

<p><i>Miranda thought:</i> What an interesting metaphor on the global economy.</p>
<p><i>Chris thought:</i> Is that mustard?</p>

<i> 和 <em> 有什么区别？

再说一次

• <em> 用于强调
• <i> 用于将文本斜体化，但不强调

如果您想使用 <i> 来表示某件事的标题，比如

<p>
  The book 
  <!-- Not the end of the world, but... --> 
  <i>Mr. Penumbra's 24-Hour Bookstore</i>
  is good.
</p>

<p>
  The book 
  <!-- ...this is more semantically correct. --> 
  <cite>Mr. Penumbra's 24-Hour Bookstore</cite>
  is good.
</p>

幸运的是，浏览器会将包裹在 <cite> 标签中的内容斜体化，就像 <i> 一样，因此如果您引用作品（例如 Moby Dick）或出版物（例如 The New York Times）时，则无需执行任何其他操作。

使用您自己的 HTML 类和 CSS

如果目标是视觉上将文本区分开来，那么我们 不需要 使用 <i> 元素。 跨度没有语义意义，可以进行样式化以实现视觉上的强调

<p>
  Shoes are <span class="emphasis">on sale</span> this week!
</p>

.emphasis {
  background: lightyellow;
  font-style: italic;
}

CSS 属性 font-style 是您使文本斜体所需的属性，您可以将其应用于任何您喜欢的选择器。

注意“伪斜体”

并非所有字体都包含斜体字符。 或者，您可能处于字体斜体版本未加载的情况。 在这两种情况下，浏览器都会 尝试伪造，这几乎总是看起来很糟糕（或者至少比使用实际的斜体字体更糟糕）。

没有任何东西会提醒您这一点——您只需要留心观察。 以下是用伪斜体的 Merriweather 字体示例

Unicode 斜体

Unicode 中有数不胜数的字符，包括带有斜体风格的字母。

当您没有 HTML 控制权来执行斜体等操作时，您可能会使用它，例如在 Twitter 上撰写推文时。

这在可访问性方面非常糟糕。 它会分别到达每个字符，使其（可能，对我来说）难以理解单词。 在使用这种方法时要非常小心，如果您真的要使用它的话。

可变字体中的斜体

这是一个比较高级的概念，但是存在一些叫做 可变字体 的东西。 它们在浏览器中提供定制功能。 因此，与其为粗体版本提供第二个字体文件，不如在其中包含信息，以便使用该文件来使自己变为粗体。 但是，“粗体”只是可变字体 可能 提供的功能的一个例子。 并非所有可变字体都提供此功能。

可变字体可能具有“倾斜”或“斜体”选项，您可以通过这种方式应用这种外观。

---

这就是关于何时使文本斜体的五个不同答案。 希望这也有助于解决下一个逻辑问题： 我应该使用哪种方法？