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

::首字母伪元素选择器

::first-letter是一个类似于::before和::after的伪元素选择器，它有效地使元素的第一个字母具有样式，就好像它是它自己的独特元素一样，而无需向页面添加任何额外的标记。

这是一个简单的例子，我们为第一段或文章元素的第一个字母设置样式：

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;
}

有了这个，我们得到了这样的东西：

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

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;
}

除了使用更大的字体大小之外，我们还为line-height设置了一个较低的值，以便在给定较大字体的情况下，第一行的行高不受第一个字母的初始行高的影响。问题是 drop cap 并不完全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;
}

浏览器对 ::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;
}

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