::first-letter 要生效必须同时满足HTML结构干净、CSS上下文支持文本流、样式组合完整三重条件；常见失效原因包括父容器为flex/grid、首字符前有空白或标签包裹、以全角标点开头等，且必须配齐float: left、line-height: 0.75、font-size响应式设置才能真正下沉。
只写 ::first-letter { font-size: 3em; } 不会下沉，只会撑高行距、顶开第二行文字；真正生效必须同时满足 HTML 结构、CSS 上下文、样式组合三重条件。
为什么 ::first-letter 写了却完全没反应
浏览器不是报错，而是静默忽略——它对 DOM 和 CSS 环境极其敏感，常见失效原因包括：
- 父
<p>被套在display: flex或display: grid容器里，文本流被切断 - HTML 中首字符前有换行、空格、
<!-- 注释 -->或零宽字符（比如富文本编辑器自动插入的） - 首字被
<strong>、<em>等内联标签包裹，如<p><strong>今</strong>天…</p> - 段落以
《、【、“等全角标点开头，::first-letter选中的是标点而非汉字，结果放大后严重溢出
::first-letter 真正下沉必须配齐的三个样式
缺一不可，单改一个大概率导致文字错位、截断或悬浮不沉：
-
float: left：唯一能触发文字环绕的属性；不加它，首字只是变大，后续文字仍从同一基线平齐开始排 -
line-height: 0.75（无单位）：必须显式设置；继承父级line-height: 1.6会让放大后的首字像竖砖立着，文字只能绕其“头顶” -
font-size: clamp(2rem, 4vw, 3.5rem)：中文建议 ≥2.5em；固定值易在小屏失衡，响应式更稳妥
额外建议：margin-right: 0.2em 控制右侧间隙；父 <p> 加 overflow: hidden 清除浮动，比 clear: both 更轻量。
立即学习“前端免费学习笔记（深入）”；
中文场景下最容易被忽略的细节
不是样式写得不够多，而是底层渲染逻辑不同：
- 中文没有 ascender/descender 基线，
line-height: 0.8在思源宋体下刚好，在 Noto Sans CJK 下可能截顶——务必用最终上线字体实测 - 某些字体（如手写体、装饰体）字宽不均，单纯放大容易撑破行框；推荐指定
font-family: "PingFang SC", "Hiragino Sans GB"等结构稳定字体 - CSS 无法让
::first-letter“跳过《选第二个字”；CMS 导入或用户直输内容时，段落以标点开头的概率很高，必须靠服务端正则或前端 JS 预处理清洗 - iOS Safari 在 viewport 缩放后偶有重绘异常；可在
@media中关闭float，改用display: inline-block+vertical-align: top
真正麻烦的从来不是写几行 CSS，而是确认 DOM 结构干净、字体加载完成、且没被其他 CSS 规则意外覆盖——这些地方不检查，::first-letter 就永远静默失效。
