::first-letter伪元素可实现首字放大，需设置font-size、float:left、line-height:1、margin-right等属性，并注意中文兼容性、HTML结构及响应式单位。
用 ::first-letter 伪元素可以轻松实现段落首字放大效果，关键在于正确设置字体大小、行高、浮动等属性，同时注意兼容性和内容限制。
基础写法与必要样式
最简实现如下：
p::first-letter {
font-size: 3em;
font-weight: bold;
}
但仅设 font-size 容易导致首字与后续文字错位。推荐搭配以下属性：
- float: left：让首字左浮动，使后续文字环绕排版（经典“首字下沉”效果）
- line-height: 1：避免因放大导致行高异常撑开段落
- margin-right: 0.2em：增加首字与第二字间距，提升可读性
适配不同字体和中文场景
::first-letter 对中文支持良好，但需注意：
立即学习“前端免费学习笔记（深入）”；
- 只作用于段落开头的第一个字符（包括汉字、英文字母、数字、标点），不识别空格或换行符
- 若段落以空格、
<span></span>）开头，伪元素可能失效——确保首字符是可见文本 - 中文字体建议配合
font-family指定衬线体（如"SimSun", "Noto Serif CJK"），增强视觉对比
避免常见问题
这些细节容易被忽略，却直接影响效果：
-
不要在
<p></p>内嵌套其他块级元素（如<div>、<code><p></p>），否则::first-letter可能不触发 -
避免给段落设
display: inline或inline-block，该伪元素仅对block、table-cell等块级上下文生效 -
移动端需测试字体缩放：用
em或rem而非固定像素值，保证响应性
进阶微调示例
模拟传统印刷风格的首字下沉：
p::first-letter {
float: left;
font-size: 4.5em;
line-height: 0.8;
margin-right: 0.15em;
font-family: "Georgia", serif;
color: #2c3e50;
}
配合段落 padding-top: 0.2em 可进一步对齐基线，让整体更协调。
