真正下沉必须用 float: left 抽离文档流并配合 line-height 压低行框高度；::first-letter 在 flex/grid 容器、首字符前有空白或被内联标签包裹时会静默失效；中文需预处理标点空白并选用衬线字体。
为什么只写 ::first-letter { font-size: 3em; } 完全不“沉”
它根本没脱离行内流——::first-letter 默认渲染为一个内联盒，放大后只是把第一行撑高，文字从它“头顶”绕过去，视觉上毫无下沉感。真正下沉必须靠 float: left 抽离文档流 + line-height 压低自身行框高度，二者缺一不可。
::first-letter 静默失效的三个结构硬伤
DevTools 里压根看不到 computed 样式，不是选择器写错，而是浏览器直接跳过渲染：
- 父
<p>被套在display: flex或display: grid容器里，文本流中断 - HTML 中首字符前有换行、空格、
<!-- 注释 -->，例如<p>\n今天…</p> - 首字被
<strong>、<span>等内联标签包裹，如<p><strong>今</strong>天…</p>
中文首字下沉必须手动预处理标点和空白
中文没有“首字母”概念，但 ::first-letter 会忠实地选中 DOM 文本流第一个字符——哪怕它是《、”、【这类全角标点。CMS 或富文本编辑器插入内容时，常带零宽空格、换行符或开头引号，导致放大错位。
- 上线前用正则清理：
/^[\u3000-\u303f\uf900-\uf9fc\uff00-\uffef\u2000-\u206f\uff01-\uff5e]+/移除段首标点 - 服务端或 JS 初始化时对
textContent执行trimStart()，避免 HTML 空白干扰 - 思源宋体等 ascender 偏高的字体，需额外加
margin-bottom: -0.2em微调，慎用margin-top
最小可行且兼容的报纸风 CSS 写法
核心是让首字“浮出”左上，文字自然环绕，同时避免后续段落塌陷重叠：
立即学习“前端免费学习笔记（深入）”；
- 给段落加
overflow: hidden清除浮动，否则高度塌陷 -
p::first-letter必须设float: left+font-size: 3.2em+line-height: 0.75（无单位） -
margin-right: 0.15em控制字间距，别依赖 HTML 空格（压缩后消失） - 中文建议用
font-family: "Noto Serif SC", "Source Han Serif", serif，细黑体撑不起下沉感
复杂点不在样式本身，而在首字符是否真实、干净、处于块级文本流最前端——只要 DOM 结构稍有偏差，::first-letter 就彻底静默。
