::first-letter仅对块级容器或table-cell等形成独立格式化上下文的元素生效；作用于inline元素如时浏览器直接忽略，需设display:block或inline-block，并避免父级font-size:0等干扰。
为什么 ::first-letter 在 inline 元素上完全不生效
因为 ::first-letter 伪元素只对「块级容器」或「table-cell」等能形成独立格式化上下文的元素生效。如果你把它写在 <span></span>、<a></a> 或其他默认 display: inline 的标签上，浏览器会直接忽略该样式——连计算都不计算。
实操建议：
- 给目标元素显式设置
display: block或display: inline-block（后者更灵活，适合嵌套在段落中） - 避免套在
<strong></strong>、<em></em>等内联语义标签内部再用::first-letter，优先作用于外层<p></p>或自定义<div class="intro"> <li>检查是否被父级 <code>font-size: 0或line-height: 0干扰——这些会间接导致首字母渲染尺寸为 0 - 首字符是空格、换行符或全角空格（
- 使用了 OpenType 字体但启用了
font-variant-east-asian: traditional等特性，可能影响字形提取逻辑 -
line-height设得过大且未配vertical-align，导致首字母“悬空”出可视区——建议用vertical-align: top或baseline显式对齐 - 设置了
text-transform: uppercase但样式里又写了text-transform: lowercase，造成冲突覆盖 - 如果首字被包裹在
<span>你好</span>里，::first-letter会尝试作用于<span></span>而非“你”，结果无效 - 使用了 Vue/React 等框架时，若首字是响应式插入（如
{{ title }}），需确保插值内容不带前置空格或注释节点 - 某些字体（如思源黑体）在小字号下首字 hinting 异常，看起来像没生效；可临时换用
font-family: "Helvetica Neue", sans-serif排查是否字体问题 - 不要依赖
letter-spacing来“拉开”首字间距——它会影响整个伪元素盒模型，容易引发换行错位 - 别在
display: grid直接子元素上用::first-letter，哪怕它看起来是段落开头 - 如果需要精确控制首字位置（比如下沉 2 行 + 右侧文字环绕），纯 CSS 风险高，建议用 JS 提取首字并包裹
<span class="drop-cap"></span>后再样式化 - 移动端 Safari 对
font-size小于14px的::first-letter渲染不稳定，最低建议设为16px
::first-letter 对字体和行高敏感的几个关键点
即使元素是块级，::first-letter 也只作用于「视觉上第一个可渲染的字母/数字/标点」，且受字体排版规则严格约束。常见失效场景包括：
中文首字加粗/变色为什么经常失败
中文没有传统意义上的“首字母”，但 ::first-letter 仍支持单个汉字（前提是它确实是 DOM 中第一个文本节点里的第一个字符）。问题多出在结构和渲染时机：
立即学习“前端免费学习笔记（深入）”；
兼容性与替代方案的现实取舍
Firefox 从 69+ 开始支持 ::first-letter 对 display: flex 容器的子元素生效，但 Chrome/Safari 仍要求父容器必须是块级且无 display: contents。这意味着：
真正卡住的时候，不是该继续调 float 和 margin，而是该打开开发者工具，右键检查首字符是否真的被选中为 ::first-letter —— 很多时候它根本没进入渲染树。
