真正下沉必须用 float: left 抽离文档流并配合 line-height 压低行框高度；::first-letter 在 flex/grid 容器、首字符前有空白或被内联标签包裹时会静默失效；中文需预处理标点空白并选用衬线字体。
为什么只写 ::first-letter { font-size: 3em; } 完全不“沉”
它根本没脱离行内流——::first-letter 默认渲染为一个内联盒，放大后只是把第一行撑高，文字从它“头顶”绕过去，视觉上毫无下沉感。真正下沉必须靠 float: left 抽离文档流 + line-height 压低自身行框高度，二者缺一不可。
::first-letter 静默失效的三个结构硬伤
DevTools 里压根看不到 computed 样式，不是选择器写错，而是浏览器直接跳过渲染：
- 父
<p></p>被套在display: flex或display: grid容器里，文本流中断 - HTML 中首字符前有换行、空格、
<!-- 注释 -->，例如<p>\n今天…</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> - 首字被
<strong></strong>、<span></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 就彻底静默。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
