::first-letter是唯一可靠跨浏览器的首字下沉方案，但需父元素为块级、无前置干扰字符、配合float:left+精确line-height+font-size三者协同生效，否则易失效。
::first-letter 是当前唯一可靠、跨浏览器支持的首字下沉方案，但必须配合 float: left + 精确 line-height + 块级容器才能生效；纯靠 font-size 放大或套在 inline 元素上，一定失败。
为什么 ::first-letter 有时完全没反应
它不是“写了就管用”的万能选择器，失效几乎总是结构或环境问题：
- 父元素不是块级：比如
<p></p>被设成display: inline或display: flex，伪元素直接不触发 - 首字符前有干扰：HTML 中段落开头有空格、换行、注释（
<!-- -->）或内联标签（如<span>你</span>好），::first-letter找不到“第一个文本字符” - 用了破坏文档流的属性：父
<p></p>上加了float或position: absolute，导致伪元素脱离上下文，渲染行为失控 - 中文标点开头：段落以
《、【、“等全角符号起始，::first-letter会选中它而非汉字——结果是引号被放大三倍，排版崩坏
::first-letter 必须写的三个核心样式
只写 font-size 和 color 是无效的。真正决定“沉不沉”的是这组协同参数：
-
float: left：唯一能触发文字环绕的属性，缺了它，首字只是变大，后续文字不会绕排 -
line-height: 0.7–0.9：必须显式设置，且值要远小于父段落的line-height（如父段落是1.6）。不压低这个值，放大后的首字会按继承行高撑开整行，第二行文字被顶到下方甚至重叠 -
font-size: clamp(2rem, 4vw, 3.5rem)：响应式推荐写法，避免小屏下首字过大溢出；固定值至少用2.5em，2em在多数字体下视觉下沉感极弱
额外建议：margin-right: 0.15em–0.25em 控制首字与正文间距，比用空格或 padding 更稳定；display: block 可加可不加，但加了能在 Safari 下减少浮动抖动。
中文场景下最常踩的坑
中文没有大小写，也不像英文有明确的 ascender/descender 基线，所以渲染更难控：
- 标点开头无法跳过：CSS 没法让
::first-letter“跳过顿号选第二个字”，只能靠服务端正则预处理，或前端 JS 检测后动态包裹首汉字（例如用^[\u3000-\u303f\uf900-\uf9fc\uff00-\uffef\u2000-\u206f\uff01-\uff5e]+匹配开头标点并移除） - 字体影响巨大：思源宋体、Noto Sans CJK 等字体的字形上下伸展不一，
line-height: 0.8在 A 字体刚好，在 B 字体可能截顶或留白过多；实测时务必用最终上线字体 -
margin-bottom: -0.2em往下拉比margin-top更安全：后者容易触发新 BFC，导致整段偏移；负 bottom 是微调基线对齐的常用手段 - 别信
text-transform：中文无大小写转换，设了也无效；若父元素有text-transform: uppercase，某些浏览器会让::first-letter作用于已转换字符，造成逻辑错乱
initial-letter 现在能不能用
不能用于生产环境。截至 2026 年 5 月，initial-letter 的实际覆盖率仍低于 20%，且问题集中：
- Safari 16.4+ 原生支持，但中文字体下常出现顶部截断（尤其思源宋体）或基线偏高
- Chrome 119+ 需手动开启
chrome://flags/#enable-experimental-web-platform-features，默认关闭 - Firefox 完全不支持，
@supports (initial-letter: 3)永远返回 false - 它不继承父元素颜色、粗细等样式，必须和
::first-letter叠加使用，等于多写一套 fallback
真要用，必须写降级：先确保 ::first-letter + float 正常工作，再用 @supports 包一层 initial-letter 替换 float 行为——而不是反过来指望它兜底。
复杂点在于：首字下沉不是“调个字号就行”的简单样式，而是涉及盒模型、行高计算、字体度量、BFC 触发的综合渲染问题。最容易被忽略的是——你看到的“下沉效果”，其实是 float 抽离 + line-height 压缩 + margin 微调三者共同作用的结果，少一个环节，就会变成“字变大了但没沉下去”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
