仅写 ::first-letter { font-size: 3em; } 不会下沉，只会撑大首字、顶开第二行；真正下沉必须同时满足：父元素为块级且未被 flex/grid 破坏文本流、首字符是纯文本汉字（前无空白/注释/标签）、样式配齐 float: left + line-height: 0.75 + font-size ≥ 2.5em。
只写 ::first-letter { font-size: 3em; } 不会下沉，只会把首字撑大、顶开第二行；真正“沉下去”必须同时满足三个硬性条件：父元素是块级且未被 flex/grid 破坏文本流、首字符是纯文本汉字（前无空格/注释/标签）、样式必须配齐 float: left + line-height: 0.75（无单位）+ font-size: ≥2.5em。
为什么写了 ::first-letter 却完全没反应
浏览器不是报错，而是静默忽略——::first-letter 对 DOM 结构极其敏感，常见失效场景包括：
- 父
被套在display: flex或display: grid容器里，文本流中断 - HTML 中首字符前有换行、空格、
或零宽字符（如富文本编辑器插入的） - 首字被
、等内联标签包裹，例如今天…
- 段落以《、【、“、」等全角标点开头，伪元素选中的是标点而非汉字，结果引号被放大三倍溢出
float: left 加了还是不“沉”，问题出在哪
根本原因是 ::first-letter 渲染为一个内联盒，**默认继承父段落的 line-height: 1.6**。放大后，这个盒子自身行框被拉高，像一块竖砖立在开头；float: left 虽让它脱离文档流，但若不压低它自己的行高，文字只能从它“头顶”绕排。
- 必须显式设置
line-height: 0.75（无单位），不能留空或靠继承 - 数值低于
0.6可能截断字形顶部，高于0.95容易顶开下一行 - 中文建议从
0.75起试；英文可略高（0.8–0.85） - 父
必须加overflow: hidden清除浮动，否则高度塌陷，后续段落会上移重叠
中文场景下最容易被忽略的细节
中文没有大小写和稳定基线，纯 CSS 几乎无法兜底：
-
::first-letter无法跳过全角标点选第二个字——CMS 或用户输入若以《开头，前端必须预处理，例如用正则/^[\u3000-\u303f\uf900-\uf9fc\uff00-\uffef\u2000-\u206f\uff01-\uff5e]+/移除开头标点 - 思源宋体等字体 ascender 偏高，仅调
line-height不够，可加margin-bottom: -0.2em微调；慎用margin-top，可能触发新 BFC 导致整段偏移 - 某些字体（如手写体、细黑体）放大后字形发虚或撑破行框，优先选
"PingFang SC"、"Noto Sans CJK SC"这类结构稳定的字体 - 移动端 iOS Safari 对
float+::first-letter的行框计算更保守，建议加margin-right: 0防止右侧文字紧贴
复杂点不在样式本身，而在首字符的“真实性”——它必须是 DOM 文本流中第一个可渲染的汉字，且不受任何布局或 HTML 结构干扰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
