initial-letter是CSS专用于首字母下沉排版的标准属性，仅Chromium 117+、Safari 16.4+原生支持，Firefox完全不支持；需作用于块级容器首个文本节点首字符，语法为initial-letter: <number> [<integer>]，常需搭配@supports和::first-letter降级。
initial-letter 是什么，浏览器支持情况如何
initial-letter 是 CSS 中用于控制段落首字母样式的标准属性，能实现首字母放大、下沉、跨行等排版效果。但它不是“所有浏览器都认”的特性——目前仅 Chromium 117+（Chrome 117、Edge 117）、Safari 16.4+ 原生支持；Firefox 完全不支持（截至 2024 年中），且无 vendor prefix 可用。
这意味着：如果你的项目需要兼容 Firefox 或旧版 Chrome/Edge，initial-letter 不能作为唯一方案，必须搭配降级策略。
怎么写一个基础可用的 initial-letter 样式
最简写法是给 <p> 内第一个 <span> 或直接对 ::first-letter 使用 initial-letter，但注意：该属性**只作用于块级元素中的首个字母（或符号），且该字母必须是文本节点的开头字符**。
- 推荐写法：用
<span class="drop-cap">A</span>包住首字母，再对.drop-cap设置initial-letter: 3; - 不要写
p::first-letter { initial-letter: 3; }—— 多数浏览器会忽略，因为::first-letter伪元素本身不接受initial-letter -
initial-letter接受两个参数：initial-letter: <number> [<integer>]?，前者是放大倍数（相对于行高），后者是下沉行数（默认为 1）；例如initial-letter: 4 3表示首字母放大到 4 倍行高，并占据 3 行垂直空间
常见错觉和实际限制
很多人以为 initial-letter 能像传统 drop cap 那样自由控制字体、颜色、边距——但它本质是布局控制属性，**不接管字体渲染细节**：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 首字母的字体、字号、颜色仍由其所在元素的
font-family、font-size、color决定；initial-letter只决定它“占几行、放多大” - 无法通过
initial-letter实现字母右侧文字自动缩进——需手动加padding-left或用float降级方案模拟 - 若首字母后紧跟标点（如 “A.”），标点不会被纳入
initial-letter范围；想包含标点，得把它们一起包进<span> - 行高（
line-height）必须明确设置，否则initial-letter的倍数计算可能失准；建议用无单位数值（如line-height: 1.5）
Firefox 和老浏览器怎么 fallback
没有 polyfill 能真正模拟 initial-letter 的流式布局行为，所以务实做法是分层降级：
- 用
@supports (initial-letter: 3)包裹现代样式，确保只在支持浏览器生效 - 降级方案优先选
float: left+font-size放大，配合margin-right控制文字环绕（注意：需手动调line-height和margin-bottom避免行间重叠） - 避免用
position: absolute模拟——它会脱离文档流，导致后续段落上移，且响应式下难维护 - 如果项目允许 JS 介入，可用
getBoundingClientRect()测量首字母尺寸后动态插<span>并设内联样式，但开销明显，仅限小范围使用
真正麻烦的不是写法，而是当设计稿要求“首字母下沉 3 行且右侧文字严格对齐基线”时，initial-letter 在 Safari 和 Chrome 下表现仍有细微差异，得靠反复测不同字号+行高组合才能对齐。
