::first-letter静默失效主因是html结构或渲染上下文不满足硬性前提：首字符前有空白/注释、父元素为flex/grid、首字被内联标签包裹、宿主元素非块级；实现下沉需float:left、font-size≥2.8em、line-height:0.75协同。
::first-letter 是最直接的实现方式，但实际项目中它经常静默失效——不是 CSS 写错了，而是 HTML 结构或渲染上下文不满足硬性前提。
为什么 ::first-letter 写了却完全没反应
常见错误现象是开发者工具里规则被划掉，或首字大小/浮动毫无变化。根本原因不是语法错，而是浏览器压根没选中目标字符：
- 段落开头有空格、换行符、HTML 注释（比如
<!-- intro -->后紧跟<p></p>），::first-letter就会跳过真正的首字 - 父容器设了
display: flex或display: grid，::first-letter在非块级格式化上下文中不工作 - 首字被
<span></span>、<strong></strong>等内联标签包裹，伪元素无法穿透定位 -
<p></p>被设为display: inline，必须显式加display: block才能触发
::first-letter 必须配齐的三个关键样式
只放大字体不是下沉，是“浮在上面”。真正下沉要让后续文字环绕并垂直咬合，这三者缺一不可：
-
float: left—— 这是底层机制，没有它，文字不会绕行 -
font-size: 2.8em—— 中文建议用 em/rem，避免 px 在响应式下失控；3em 在桌面端安全，小屏建议降为2.2em -
line-height: 0.75—— 控制下沉深度；低于0.65易截断字形（尤其思源黑体）；高于0.9会显得“飘”
额外建议：加 margin-top: 0.1rem 微调中文 baseline 偏移，比 vertical-align 更可靠。
中文场景下 ::first-letter 的兼容性陷阱
中文字体度量差异大，同一套 CSS 在“苹方”“微软雅黑”“HarmonyOS Sans”下下沉位置可能差半个字高：
- 标点开头（如
《论语》曰…）或带拼音/多音字时，部分浏览器会把书名号当首字符，跳过汉字 -
text-transform: uppercase对中文无效，且可能干扰渲染，别加 - 动态插入内容（如 JS 渲染富文本）后，
::first-letter不会自动重生效，需手动触发重绘或改用显式包裹 - 若要求 100% 可控，放弃伪元素，改用 HTML 显式结构：
<p><span class="dropcap">春</span>风拂面…</p>，再对.dropcap单独设样式
替代方案：initial-letter 能用吗
initial-letter 是 CSS Inline Layout Module Level 3 提出的新属性，理论上更语义、更可控，但现实很骨感：
- 目前仅 Safari 16.4+ 和 Chrome 117+（需开启
chrome://flags/#enable-experimental-web-platform-features）支持 - Firefox 和旧版 Edge 完全不识别，会静默忽略
- 即使支持，对中文多字词、标点、变体字体仍存在定位偏差，实测不如成熟 float 方案稳定
- 生产环境不建议单独依赖；可作为渐进增强加在
::first-letter规则之后，但不能替代
真正麻烦的从来不是怎么写，而是每次改完都得打开开发者工具，检查 computed 样式里 ::first-letter 是否命中、是否被覆盖、是否应用了正确的 font-family —— 字体加载顺序、fallback 回退、FOUT 都可能让下沉效果在首屏闪一下再崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
