initial-letter仅safari和chrome 120+（需开启实验性功能）原生支持，firefox和旧版edge完全不识别；合法值为initial-letter: []，仅对块级容器首文本节点首字符生效；兼容方案推荐float+line-height手动模拟。
initial-letter属性在哪些浏览器能用
目前只有 Safari 和 Chrome 120+（需开启实验性功能）原生支持 initial-letter，Firefox 和旧版 Edge 完全不识别该属性。如果你的项目需要兼容主流环境，直接用 initial-letter 会失效——它不是“写上就能用”的稳定特性。
验证方式很简单：在 Chrome 中访问 chrome://flags/#enable-experimental-web-platform-features，启用后重启；Safari 则默认开启（macOS 13+/iOS 16.4+）。其他浏览器即使写了也不会报错，但会被忽略。
initial-letter的合法值和常见错误写法
initial-letter 接收两个参数：initial-letter: <number> [<integer>]</integer></number>，第一个是下沉行数（必须是数字），第二个是下沉高度占行高的比例（可选，默认为 1）。
- ✅ 正确：
initial-letter: 3;（首字母占 3 行高） - ✅ 正确：
initial-letter: 3 2;（占 3 行高，但实际渲染高度为 2 倍行高） - ❌ 错误：
initial-letter: 3em;（单位非法） - ❌ 错误：
initial-letter: 3.5;（第一个参数必须是整数） - ❌ 错误：
initial-letter: 3 1.5;（第二个参数也必须是整数）
注意：该属性只对块级容器内的**第一个文本节点的首字符**生效，且该字符不能被 <span></span> 或其他标签包裹，否则失效。
替代方案：float + line-height 手动模拟
当 initial-letter 不可用时，最可靠的方式仍是传统 float 搭配精确尺寸控制。关键在于让首字母脱离文档流、设置足够大的字体，并用负 margin 微调垂直对齐。
.drop-cap::first-letter {
float: left;
font-size: 3.5em;
line-height: 0.7;
margin-right: 0.2em;
margin-top: 0.15em;
}
这里 line-height: 0.7 是为了压缩首字母自身行高，避免撑开第一行；margin-top 用来补偿基线偏移——不同字体的基线位置差异很大，必须实测调整。如果段落用了 text-align: justify，float 方案仍能正常工作，而 initial-letter 在 justify 场景下表现不稳定。
字体选择和渲染细节容易被忽略
首字母下沉效果是否自然，极度依赖字体本身的设计。衬线体（如 Georgia、Noto Serif）通常比无衬线体（如 Arial、Helvetica）更适合——它们的大写字母有更明确的视觉重心和留白结构。
另外要注意两点：
- 使用
font-feature-settings: "dlig";可能激活某些字体的装饰性首字母变体，但并非所有字体都支持 - 在 Retina 屏或高缩放比下，float 方案可能出现亚像素渲染模糊，此时可加
transform: translateZ(0);强制 GPU 加速
真正难的从来不是写哪一行代码，而是判断该用哪个方案、在哪种上下文里微调哪几个像素值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
