首字母缩写在印刷媒体中使用已有很长时间，用来给章节或章节第一段的第一个字母增色不少。这些首字母下沉大写有助于吸引读者的注意力，而且通常是使用非常风格化的字体的好时机，因为它只应用于一个字母，所以不会影响文本的可读性。通过使用：：First-Letter伪元素和新的首字母属性，可以在css中实现相同的首字下沉效果。

：：首字母伪元素选择符

：：First-Letter是一个伪元素选择器，类似于：：After和：：After，有效地使元素的第一个字母可以设置样式，就像它是它自己的不同元素一样，而不必向页面添加任何额外的标记。

下面是一个简单的示例，其中我们设置了第一段的第一个字母或article元素的样式：

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

有了这个，我们得到了看起来像这样的东西：

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, sit amet feugiat justo fermentum. Duis blandit tempor purus at elementum. In id consequat lorem.

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

 1article p:first-child::first-letter {
 2  color: hotpink;
 3  padding: 0 .3rem;
 4  margin: 0 .3rem 0 0;
 5  border: 2px solid;
 6  border-radius: 8px;
 7  font-family: "IBM Plex Mono";
 8
 9  font-size: 4rem;
10  line-height: 1;
11}

除了使用较大的字体大小外，我们还设置了较低的行高值，以便第一行的行高不受给定较大字体的第一个字母的初始行高的影响。问题是Drop上限并不完全Drop 。一种解决方案是使用好的旧浮点数：

 1article p:first-child::first-letter {
 2  color: hotpink;
 3  padding: 0 .3rem;
 4  margin: 0 .3rem 0 0;
 5  border: 2px solid;
 6  border-radius: 8px;
 7  font-family: "IBM Plex Mono", monospace;
 8
 9  font-size: 4rem;
10  float: left;
11  line-height: 1;
12}

<$>[注]浏览器对：：first-letter的支持几乎是普遍的。<$>

首字母属性

除了将浮点数与行高和字号一起使用来正确设置首字下沉的样式之外，还可以使用新的首字母属性，该属性需要一个表示首字下沉应该扩展到的行数的数字值。然后，浏览器自动计算适当的字体大小：

1article p:first-child::first-letter {
2  color: hotpink;
3  padding-right: 8px;
4
5  -webkit-initial-letter: 3;
6  initial-letter: 3;
7}

<$>[警告]在撰写本文时，最后一个演示只能在Safari中按预期运行。不幸的是，与：：First-Letter不同，对initial-letter的支持目前几乎不存在。因此，目前我们将不得不在一段时间内继续使用浮动。如果您仍然想使用首字母，那么您可能希望将其与@supportsat规则一起使用，这样首字下沉在不支持的浏览器中看起来就不会有任何奇怪之处。<$>

在 CSS 中使用首字母和首字母小写

：：首字母伪元素选择符

首字母属性