真正下沉首字必须用 float: left 触发文字环绕，仅 font-size 放大无效；需同时满足父元素非 flex/grid、首字符无前置空白或标签包裹、且协同设置 float: left、line-height: 0.75 和足够大的 font-size。
为什么只写 ::first-letter { font-size: 3em; } 不会下沉
它只是把首字变大，但没触发文字环绕——浏览器把它当做一个普通内联盒，继承父段落的 line-height: 1.6，结果首字被拉高、顶开第二行，视觉上“浮”在段首。真正下沉必须靠 float: left 让它脱离文档流，再用 line-height 压低自身行框高度，否则正文只能从它头顶绕。
::first-letter 静默失效的三大结构前提
DevTools 里看不到 computed 样式，大概率不是选择器写错，而是 DOM 结构不满足硬性条件：
- 父元素不能是
display: flex或display: grid—— 文本流一断，伪元素直接被忽略 - 首字符前不能有换行、空格、HTML 注释（如
\n今天
今天
- 首字符不能被
、等内联标签包裹；中文以《、【、“开头时，伪元素会选中标点而非汉字，导致放大溢出
必须协同设置的三个核心样式
缺一不可，单改一个就崩布局：
-
float: left：唯一能触发文字环绕的属性；不加它，就是纯放大 -
line-height: 0.75（无单位）：必须显式设，数值低于 0.6 可能截顶，高于 0.95 容易顶开下一行；中文建议从 0.75 起试，英文可略高（0.8–0.85） -
font-size: clamp(2rem, 4vw, 3.5rem)：响应式推荐写法；固定值至少2.5em，2em在多数中文字体下视觉无下沉感
额外建议：margin-right: 0.2em 控制与正文间距；父 加 overflow: hidden 清浮动，比 clear: both 更轻量。
中文场景下最易被忽略的渲染细节
同一套 CSS 在“苹方”“微软雅黑”“HarmonyOS Sans”下下沉位置可能差半个字高；text-transform: uppercase 对中文无效且干扰渲染；JS 动态插入富文本后，::first-letter 不会自动重生效；标点开头或带拼音的段落，部分浏览器会跳过汉字选中书名号——这些都不是 bug，是字体度量和浏览器实现差异的真实表现。真要 100% 可控，得放弃伪元素，改用显式 HTML 结构（如 春风拂面…
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
