initial-letter目前不能替代::first-letter，因其浏览器支持率低（2026年Q1全网覆盖率不足20%），中文渲染存在偏移、截断、行高计算不准等问题，且不支持颜色、粗细等样式控制，必须配合::first-letter降级使用。
initial-letter 现在不能单独用于生产环境首字下沉，它只是个“未来可用但当前不稳”的实验性方案。
为什么 initial-letter 不能直接替代 ::first-letter
它在 Chrome 119+（需手动开启 chrome://flags/#enable-experimental-web-platform-features）、Safari 16.4+ 中可用，Firefox 完全不支持，旧版 Android WebView 和 IE 更是零支持。查 caniuse 上的「global usage」数据，2026 年 Q1 全网实际可渲染覆盖率不足 20%。你写 initial-letter: 3，80% 用户看到的仍是普通段落首字——没有放大、没有下沉、没有环绕。
initial-letter 的语法和真实行为差异
它看起来比 ::first-letter 更语义化：initial-letter: 3 表示“占三行高度”，initial-letter: 3 2 表示“高为三行，下沉两行”。但实际渲染中：
- 中文下首字常偏移或截断，尤其用 Noto Sans CJK 或 PingFang SC 时，字形上下伸展（ascender/descender）没被正确计入行高计算
- 它不继承父元素的
line-height，但会受字体font-size和vertical-align影响，微调需反复试值 - 设
initial-letter: 3 2后，第二行文字未必对齐首字底部——浏览器按基线（baseline）而非字形底边对齐，这点和float: left完全不同 - 无法控制首字颜色、粗细等样式，必须靠
::first-letter覆盖，等于还得写两套规则
想用 initial-letter 得先写降级，且 fallback 必须完整
只写 @supports (initial-letter: 3) 是不够的。因为：
- Chrome 119+ 开启 flag 才生效，用户默认关着；Safari 16.4+ 虽开箱即用，但 iOS 16.4 以下设备仍占存量 15%
- 即使支持，
initial-letter对中文标点开头的段落处理不一致：有些版本跳过《、【，有些则把它们当首字放大 - 它不兼容
text-transform，若父元素有text-transform: uppercase，首字不会转大写，而::first-letter会
真正可用的写法是：
p::first-letter {
float: left;
font-size: 3em;
line-height: 0.8;
margin-right: 0.2em;
}
@supports (initial-letter: 3) {
p::first-letter {
float: none;
initial-letter: 3;
margin-right: 0.2em;
}
}
注意：这里不是“用 initial-letter 替换”，而是让它覆盖掉浮动逻辑，同时保留所有装饰性样式声明——因为 initial-letter 自身不提供颜色、粗细、行高等控制能力。
真正难的不是语法，是字体与行高联动的不可预测性
同一段 CSS，在思源宋体下首字沉得刚好，在 HarmonyOS Sans 下可能上浮半行；在桌面 Chrome 看着对齐，iOS Safari 里却右边缘被裁。这不是 bug，是 initial-letter 依赖字体度量（font metrics）做自动布局，而中文字体厂商对 ascender/descender 的标注标准不统一。上线前必须用真机测至少三种主流中文字体，不能只信模拟器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
