首字下沉

跨浏览器方式（额外标记）

Ĵ乌斯包裹段落的第一个字符的跨度，则应以CSS和风格跨度之遥。

<p>
<span class="firstcharacter">L</span> orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.
</p>

.firstcharacter {
  color: #903;
  float: left;
  font-family: Georgia;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

CSS3方式（无需额外的标记）

使用伪类选择器定位第一段的第一个字符。 不需要额外的标记，但没有IE <9支持。

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.
</p>

p:first-child:first-letter {
  color: #903;
  float: left;
  font-family: Georgia;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

initial-letter方式

使用首字母创建首字下沉

在撰写本文时，浏览器对initial-letter支持很少，但是可以用来计算首写字母应该占据的行数以及字体大小，而不必自己完成。

p:first-child:first-letter {
  color: #903; 
  font-family: Georgia;
  initial-letter: 2;
}

该浏览器支持数据来自Caniuse ，其更多信息。 数字表示浏览器支持该版本及更高版本的功能。

桌面

铬	火狐浏览器	IE浏览器	边缘	苹果浏览器
没有	没有	没有	没有	TP *

手机/平板电脑

Android Chrome浏览器	Android Firefox	安卓系统	iOS Safari
没有	没有	没有	14.0 *

翻译自: https://css-tricks.com/snippets/css/drop-caps/