::first-letter伪类可实现首字下沉，需作用于块级元素且首字符为可见符号；常用float、font-size、line-height等属性控制效果，兼容现代浏览器，中文同样适用。
使用 ::first-letter 伪类可以轻松实现首字下沉效果，这是 CSS 中专门用于修饰段落首个字母的标准方法。
基础写法与必要条件
要让 ::first-letter 生效，目标元素必须是块级容器（如 p、div），且首字符需为字母、数字或标点符号（不支持空格、换行或 HTML 标签）。
基本示例：
p::first-letter {float: left;
font-size: 3em;
line-height: 1;
margin-right: 0.2em;
}
关键样式属性说明
实现美观的首字下沉，这几个属性最常用：
立即学习“前端免费学习笔记（深入）”；
- float: left —— 让首字脱离文本流，使后续文字环绕
-
font-size —— 放大字号，通常设为
2em～4em -
line-height —— 控制下沉字行高，避免上下挤压，常设为
1或略小 - margin-right —— 添加右侧间距，防止文字紧贴下沉字
- font-weight / color / font-family —— 可额外强化视觉层次
兼容性与注意事项
::first-letter 在所有现代浏览器中支持良好，但要注意：
- 仅作用于**段落开头可见的第一个字符**，若开头是
或图标字体，可能失效 - IE8 及更早版本只支持单冒号写法
:first-letter（已过时，不建议兼容） - 不能设置
display: inline-block等会破坏浮动行为的属性 - 中文首字同样适用，但需确保没有前置空格或隐藏字符
进阶微调技巧
让效果更自然，可补充这些细节：
- 用
vertical-align: top对齐顶部基准线，避免下沉字“上浮” - 配合
padding-top微调下沉高度（作用于整个段落） - 对多行段落，加
clear: both到下一段，防止环绕影响布局 - 响应式场景中，可用媒体查询动态调整
font-size和margin
