::first-letter 是当前唯一可靠的选择，initial-letter 因浏览器支持窄、语法容错低、中文渲染不稳定，尚未达到生产可用标准。
::first-letter 是当前唯一可靠的选择，initial-letter 尚未达到生产可用标准。 它在 Safari 16.4+ 和 Chrome 120+（需手动开启实验 flag）中可用，Firefox 和绝大多数旧版浏览器完全忽略该属性。线上项目若直接依赖 initial-letter，等于主动放弃 80% 以上用户。
为什么 initial-letter 现在不能用
它不是“写上就生效”的稳定特性，而是受制于三重限制：浏览器支持窄、语法容错低、中文渲染不稳定。即使你在 Chrome 中启用了 chrome://flags/#enable-experimental-web-platform-features，仍会遇到以下问题：
-
initial-letter: 3在中文段落中可能选中顿号、引号或全角括号，而非你想要的汉字 - 值必须是整数：
initial-letter: 3.5或initial-letter: 3em直接被忽略 - 当父容器设了
text-align: justify时，首字右侧文字常出现断行异常或挤出可视区 - 某些中文字体（如部分免费 Noto 字体变体）下，下沉字垂直偏移严重，甚至被截断
::first-letter 生效的硬性前提
这个伪元素对 HTML 结构和 CSS 上下文极其敏感，不满足任一条件都会静默失效：
- 目标元素必须是块级容器（
<p></p>、<div>、<code><h2></h2>），且不能是display: flex或display: grid的直接子元素 - 首字符前不能有空格、换行、HTML 注释，也不能被
<span></span>、<strong></strong>等内联标签包裹 - 父元素不能设
text-transform: uppercase—— 否则::first-letter作用的是转换后的字符，不是原始文本 - 必须显式声明
float: left，否则只是变大，不会触发文字环绕 -
font-size建议 ≥3em（响应式可用clamp(2rem, 4vw, 3.5rem)） -
line-height必须显式设为0.7–0.9（不是继承值！），否则放大后的行框会撑开整行 -
margin-right: 0.15em–0.25em控制右侧间隙；慎用margin-top，不同字体基线差异大，实测调整更稳 - 父容器推荐加
overflow: hidden清除浮动，比clear: both更轻量且避免 DOM 污染 - 纯 CSS 无法跳过标点选第二个字，别硬扛
- 简单解法：服务端或 JS 预处理，用正则
/^[\u3000-\u303f\uf900-\uf9fc\uff00-\uffef\u2000-\u206f\uff01-\uff5e]+/提取并移走段首标点 - 若必须前端处理，可加 class 标记：
<p class="dropcap-safe">《标题》内容…</p>，再用 JS 把《》包进<span class="dropcap-ignore"></span>并隐藏 - 字体选择直接影响效果：衬线体（如
"Noto Serif CJK"、"Songti SC"）比无衬线体更稳，手写体或装饰体极易放大后发虚或溢出
关键参数怎么配才不翻车
只写 font-size 和 float 必然导致第二行文字被顶高、首字与正文重叠。真正起作用的是三者协同：
中文场景最易被忽略的坑
中文没有首字母概念，但 ::first-letter 会匹配 Unicode 字母类字符 —— 这包括《、【、”、（等全角标点。CMS 导入或用户直输内容时，段落以这些符号开头的概率远高于预期：
真正麻烦的从来不是“怎么写”，而是“怎么让各种脏数据下的首字都沉得准”。一旦涉及 CMS、UGC 或多语言混合内容，::first-letter 就必须搭配预处理逻辑，否则上线后第一轮用户反馈大概率是“为什么首字变成顿号了”。
