在CSS中使用首字母和首字母的首字母下沉

长期以来，首字下沉一直用于印刷媒体，以使章节或章节的第一段的第一个字母显得华丽。这些首字下沉有助于吸引注意力和吸引读者，并且通常是使用非常程式化的字体的好时机，因为它只应用于一个字母，因此不会影响文本的可读性。使用 CSS 使用 ::first-letter 伪元素和新的 initial-letter 属性可以实现相同的首字下沉效果。

::首字母伪元素选择器

::first-letter 是一个伪元素选择器，类似于 ::before 和 ::after是它自己独特的元素，所有这些都无需向您的页面添加任何额外的标记。

这是一个简单的示例，我们设置第 1 段的第一个字母或 article 元素的样式：

article p:first-child::first-letter {
  color: hotpink;
  padding: 0 .3rem;
  margin: 0 .3rem 0 0;
  border: 2px solid;
  border-radius: 8px;
  font-family: "IBM Plex Mono", monospace;
}

有了这个，我们得到如下所示的东西：

Lorem ipsum dolor sit amet, consectetur adipiscing elit。 Suspendisse ante turpis、rhoncus vel nisi eu、congue iaculis neque。 Nunc bibendum dui felis, et auctor mi maximus in。 Vestibulum porta orci et ex mattis，坐在 amet feugiat justo 发酵。 Duis blandit tempor purus at elementum。在 id consequat lorem。

不过天堂里有麻烦。看看如果我们使用更大的字体会发生什么；典型的首字下沉的主要特征之一：

article p:first-child::first-letter {
  color: hotpink;
  padding: 0 .3rem;
  margin: 0 .3rem 0 0;
  border: 2px solid;
  border-radius: 8px;
  font-family: "IBM Plex Mono";

  font-size: 4rem;
  line-height: 1;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit。 Suspendisse ante turpis、rhoncus vel nisi eu、congue iaculis neque。 Nunc bibendum dui felis, et auctor mi maximus in。 Vestibulum porta orci et ex mattis，坐在 amet feugiat justo 发酵。 Duis blandit tempor purus at elementum。在 id consequat lorem。

除了使用较大的字体大小之外，我们还为 line-height 设置了一个较低的值，以便在给定较大字体的情况下，第一行的行高不受第一个字母的初始行高的影响. 问题是首字下沉并不完全 drop。一种解决方案是使用好的旧花车：

article p:first-child::first-letter {
  color: hotpink;
  padding: 0 .3rem;
  margin: 0 .3rem 0 0;
  border: 2px solid;
  border-radius: 8px;
  font-family: "IBM Plex Mono", monospace;

  font-size: 4rem;
  float: left;
  line-height: 1;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit。 Suspendisse ante turpis、rhoncus vel nisi eu、congue iaculis neque。 Nunc bibendum dui felis, et auctor mi maximus in。 Vestibulum porta orci et ex mattis，坐在 amet feugiat justo 发酵。 Duis blandit tempor purus at elementum。在 id consequat lorem。

浏览器对 ::first-letter 的支持非常普遍。

首字母属性

将浮点数与 line-height 和 font-size 一起使用以正确设置首字下沉样式的另一种方法是使用新的 initial-letter 属性，该属性需要表示首字下沉应延伸到的行数的数值。然后浏览器会自动计算正确的字体大小：

article p:first-child::first-letter {
  color: hotpink;
  padding-right: 8px;

  -webkit-initial-letter: 3;
  initial-letter: 3;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit。 Suspendisse ante turpis、rhoncus vel nisi eu、congue iaculis neque。 Nunc bibendum dui felis, et auctor mi maximus in。 Vestibulum porta orci et ex mattis，坐在 amet feugiat justo 发酵。 Duis blandit tempor purus at elementum。在 id consequat lorem。

在撰写本文时，最后一个演示只能在 Safari 中按预期工作。与 ::first-letter 不同，不幸的是，对 initial-letter 的支持目前几乎不存在。所以现在我们将不得不继续使用浮点数一段时间。如果您仍想使用首字母，您可能希望将它与 @supports 规则一起使用，以便在不支持的浏览器中首字母下沉看起来不会很奇怪。