initial-letter是css专用于首字母下沉排版的标准属性，仅chromium 117+、safari 16.4+原生支持，firefox完全不支持；需作用于块级容器首个文本节点首字符，语法为initial-letter: []，常需搭配@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></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter"><img
src="https://img.php.cn/upload/skill/000/000/081/179232667384043.jpg" alt="html-to-pptx-converter" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="overflowclass">html-to-pptx-converter</a>
<p class="overflowclass">使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 内第一个 <span></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>]?</integer></number>，前者是放大倍数（相对于行高），后者是下沉行数（默认为 1）；例如initial-letter: 4 3表示首字母放大到 4 倍行高，并占据 3 行垂直空间
常见错觉和实际限制
很多人以为 initial-letter 能像传统 drop cap 那样自由控制字体、颜色、边距——但它本质是布局控制属性，**不接管字体渲染细节**：
- 首字母的字体、字号、颜色仍由其所在元素的
font-family、font-size、color决定；initial-letter只决定它“占几行、放多大” - 无法通过
initial-letter实现字母右侧文字自动缩进——需手动加padding-left或用float降级方案模拟 - 若首字母后紧跟标点（如 “A.”），标点不会被纳入
initial-letter范围；想包含标点，得把它们一起包进<span></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></span>并设内联样式，但开销明显，仅限小范围使用
真正麻烦的不是写法，而是当设计稿要求“首字母下沉 3 行且右侧文字严格对齐基线”时，initial-letter 在 Safari 和 Chrome 下表现仍有细微差异，得靠反复测不同字号+行高组合才能对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
