一个开篇段落暴露的问题
假设你正在做一篇中文长文的阅读页。正文首段需要首字下沉：第一个字放大到大约三行高，下面两行文字紧贴它的右侧排列，段落其余部分正常换行。设计师给的参考图里，首字顶端与第一行文字顶端大致齐平，底部与第三行基线对齐，右侧文字不侵入首字区域。
直觉做法是用 ::first-letter 配合 float: left：把首字放大、浮动到左侧，再靠 line-height、margin、padding 一点点调位置。这个方案能跑起来，但它是“猜”出来的。首字放大后，它的行盒高度由字体度量决定，而周围文字的行高由 line-height 决定，两套度量并不共享同一个基准。换一款字体、换一个字号、把段落放进不同的容器宽度，之前调好的偏移量就会失效。中文正文里首字往往是全角汉字，它的字形高度和西文大写字母差别很大，用西文文章调好的参数直接搬到中文页面，通常会对不齐。
initial-letter 试图把这件事从“手工对齐”变成“由布局引擎计算”。它不要求你告诉浏览器首字应该偏移多少像素，而是声明首字占几行、基线落在第几行，剩下的尺寸和位置由浏览器按行盒和字体度量推导。
initial-letter 的两个数值在控制什么
initial-letter 适用于 ::first-letter 伪元素，也适用于块容器内首个行内级子元素。它的取值是 normal，或者一个表示大小的 <number>，后面可以跟一个表示下沉行数的 <integer>。
第一个数值是首字占据的行数，也就是它的大小。initial-letter: 3 表示首字高度约为三行。第二个数值是下沉值，表示首字的基线落在第几行。如果只写一个值，下沉值默认等于大小值向下取整到正整数。所以 initial-letter: 3 等价于首字高三行、基线落在第三行；initial-letter: 3 2 表示首字仍然高三行，但基线只落到第二行，视觉上首字相对默认位置被抬起了一行。
MDN 的示例把这一点写得很直白：initial-letter: 3 4 是高三行、基线在第四行，也就是比默认位置更低；initial-letter: 3 1 是高三行、基线在第一行，首字几乎完全抬到文字上方。同一个大小值配不同下沉值，得到的是“下沉”“齐平”“凸起”三类首字效果。
这里要区分两个概念。大小决定首字盒有多高，下沉决定这个盒子的基线放在哪一行。很多人第一次用会以为第二个数值是“往下沉几行”，实际上它描述的是基线所在的行号，数值越小首字越靠上。
规范还定义了 initial-letter-align 来控制首字与周围文字的对齐方式，以及 initial-letter-wrap 来控制周围文字如何绕排。资料显示 initial-letter-wrap 在 CSS Inline Layout Module Level 3 中被标记为 at-risk，也就是工作组认为它可能难以被及时、可互操作地实现，在进入 Proposed Recommendation 阶段时存在被移除的可能。依赖这个属性做精细绕排的页面，需要把它当作可能变化的能力。
从首字到行盒：布局引擎按什么顺序计算
理解 initial-letter 的价值，关键是看它参与布局的方式。它不是一个视觉偏移，而是改变了首字所在行盒的构造。
下面的流程图描述一篇中文长文开篇段在支持 initial-letter 的浏览器中的处理顺序。
flowchart TD
A[段落文本进入行内布局] --> B[::first-letter 命中首字]
B --> C[读取 initial-letter 的大小与下沉值]
C --> D[按行高与字体度量推算首字盒高度]
D --> E[确定首字基线所在行]
E --> F[首字盒占据多行，后续行盒缩短]
F --> G[周围文字在首字右侧重新分行]
G --> H[绘制首字与正文]
关键转折在 D 到 F。浏览器先根据首字要占的行数和当前行高，算出一个跨多行的首字盒；这个盒子会参与行盒的可用宽度计算，于是首字右侧的若干行文字被“挤”到更窄的空间里，自动重新换行。这正是 float 方案做不到的地方：float 元素虽然也会影响行盒宽度，但它的高度来自放大后的字体度量，和行高不是同一套计算，浏览器不会为了让浮动元素正好占满三行而调整它的尺寸。
initial-letter 的定位依赖字体度量。规范在引言里明确指出，很多书写系统的字体缺少相关度量，例如希伯来文的视觉顶部度量在 OpenType 表中并不存在。规范希望字体为所有书写系统提供这些度量，但这需要 OpenType 允许这类度量、字体设计者提供准确数值。对中文正文来说，这带来一个现实约束：首字下沉的视觉效果取决于所用中文字体是否提供了浏览器需要的度量，不同字体下的结果可能不一致。
与 float 首字下沉方案的差异
float 方案和 initial-letter 都能让首字变大并让文字绕排，但它们的失败方式不同。
| 维度 | float 首字下沉 | initial-letter |
|---|---|---|
| 尺寸来源 | 由 font-size 和 line-height 手工推算 | 由占行数与行高推导 |
| 基线对齐 | 靠 margin、padding 微调，换字体易失效 | 由下沉值指定基线所在行 |
| 多行占位 | 浮动盒高度不受行数约束 | 首字盒按行数跨行参与布局 |
| 文字绕排 | 依赖浮动规则，形状是矩形 | 由行盒收缩决定，规范另有 initial-letter-wrap |
| 中文适配 | 全角字形高度差异大，需逐字体调参 | 依赖字体度量，跨字体仍可能不一致 |
| 浏览器支持 | 广泛支持 | 支持有限，需回退 |
| 调试成本 | 参数多、耦合强 | 参数少，但可观测性依赖浏览器实现 |
表格里最容易被低估的是“多行占位”这一行。float 方案中，浮动盒的高度由内容决定，你无法直接告诉浏览器“这个盒子必须正好占三行”。如果首字放大后的实际高度略小于三行，第三行文字就会从首字下方穿过；略大于三行，第四行文字会被挤开。为了让它看起来正好占三行，通常要把 line-height 和 font-size 调成特定比例，这个比例一旦被全局样式覆盖就会失效。
initial-letter 把“占几行”变成输入而不是结果，这是它相对 float 最实质的改进。代价是它把控制权交给了浏览器的行内布局实现，你能调的自由度更小，而且不同浏览器对同一组值的解释可能不完全一致。
浏览器支持现状与可观测信号
MDN 把 initial-letter 标记为“有限可用”，并说明它不属于 Baseline，因为它尚未在主流浏览器中得到支持。Can I use 的数据显示，Chrome 从 110 版本起为部分支持，Safari 从 9 版本起为部分支持，而 Firefox 在列出的版本范围内标记为不支持。
这些“部分支持”需要谨慎对待。Can I use 的“部分支持”通常意味着属性可用，但规范的某些部分尚未实现，或者存在已知的行为差异。结合规范中 initial-letter-wrap 被标记为 at-risk，可以推断：即使浏览器认这个属性，精细的绕排控制也不一定可用。
MDN 的示例同时写了 -webkit-initial-letter 和标准属性，这说明在部分浏览器中仍需要前缀形式。前缀的存在本身就是一个信号：该属性的实现路径在不同引擎中并不统一。
在真实项目里，判断首字下沉是否生效，不能只看 CSS 是否被解析。可以观察这几个信号：首字是否明显高于周围文字；首字右侧的前几行文字是否被缩短并重新换行；段落首行与第二行的左边界是否一致。如果首字变大了但文字没有绕排，通常是属性未被识别，::first-letter 只是应用了 font-size 之类的其他声明。
渐进增强与降级策略
由于支持范围有限，initial-letter 更适合作为渐进增强，而不是唯一实现。
一种可行结构是把首字下沉的声明放在 @supports 中：
/* 基础样式：不假设 initial-letter 可用 */
.article > p:first-of-type::first-letter {
font-size: 1em;
}
@supports (initial-letter: 3) {
.article > p:first-of-type::first-letter {
-webkit-initial-letter: 3;
initial-letter: 3;
}
}这段示意代码的关键在于：基础样式不放大首字，只有确认浏览器支持 initial-letter 时才应用。这样在不支持的浏览器里，首字保持正常大小，段落排版不会因为半生效的放大而错位。
如果设计要求在所有浏览器里都呈现首字下沉，就需要保留 float 方案作为回退。这时要注意两套方案不要同时生效：可以在 @supports 分支里用 float: none 覆盖掉回退方案的浮动，避免首字既浮动又被 initial-letter 处理。
中文正文还有一个容易被忽略的边界：首字是标点或引号时，::first-letter 的命中规则和西文不同。如果段落以左引号开头，浏览器可能把引号和后面的汉字一起作为首字处理，也可能只取引号。这会让首字的宽度和字形高度与预期不符。稳妥的做法是让首字下沉只用于确定以汉字开头的段落，或者在内容层面避免让标点成为首字。
什么时候该用，什么时候不该用
initial-letter 解决的是“首字需要按行数占位并与正文基线对齐”这一类问题。它的优势在于把尺寸和基线位置交给布局引擎，减少对字体度量的手工猜测；它的代价是浏览器支持有限、可调参数少、跨字体结果仍可能不一致。
适合使用的场景是：正文以纯文本为主、首字为普通汉字或字母、允许在不支持的浏览器里退化为普通首字、并且不依赖精细的文字绕排形状。
不适合的场景也很明确：需要在所有浏览器中保持完全一致的视觉效果；首字是标点、引号或复杂字形；正文使用多栏布局且首字需要跨栏；或者设计要求文字沿首字轮廓绕排。这些情况下，float 方案虽然调参麻烦，但可控性更强，或者需要重新评估是否值得为首字下沉引入额外的布局复杂度。
一个务实的判断标准是：如果首字下沉只是锦上添花的排版细节，用 @supports 做渐进增强，让支持的浏览器享受更稳的对齐，不支持的浏览器保持正常排版；如果首字下沉是版式的核心特征，就必须接受 float 方案的调参成本，并把字体、字号、行高固定下来，减少变量。