initial-letter 是 CSS 实现首字母下沉的原生属性，Chrome 117+、Safari 16.4+ 支持，Firefox 完全不支持；需满足块级容器、首子节点为纯文本、无 float/shape-outside 冲突三条件，配合 @supports 提供 ::first-letter 降级方案。
initial-letter 是什么，浏览器支持现状如何
initial-letter 是 CSS 专门用于首字母下沉（drop cap）的原生属性，语法简单：initial-letter: 3; 表示首字母高度占 3 行，initial-letter: 3 2; 则额外指定下沉行数为 2 行（即首字母占据 3 行高度，但只向下偏移 2 行，留出 1 行与正文对齐）。但它不是“开箱即用”：Chrome 117+、Safari 16.4+ 支持，Firefox 仍完全不支持（截至 2024 年中），且仅作用于块级容器中的**第一个文本节点的首字符**——这意味着 <p><strong>A</strong>pple...</p> 中的 A 不会被选中，因为首节点是 <strong> 元素而非纯文本。
实际写法：必须满足哪些前提条件
想让 initial-letter 生效，得同时满足三个硬性条件：
- 目标元素必须是块级容器（如
<p>、<div>），且其第一个子节点是**纯文本节点**（不能是标签） - 首字符必须是可渲染的 Unicode 字符（字母、数字、标点均可，但空格、换行、
- 不能和
float、shape-outside等影响文本流的属性共存（否则会被忽略）
常见翻车现场：<p><span>T</span>ext...</p> —— 因为首节点是 <span>，initial-letter 直接失效；修复只需改成 <p>T<span>ext...</span></p>。
兼容 fallback 怎么写才不破坏布局
由于 Firefox 完全无视 initial-letter，必须提供降级方案。最稳妥的是用 ::first-letter 伪元素 + 手动定位，但要注意两点：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
-
::first-letter对 Unicode 复杂文字（如中文、阿拉伯文）支持不稳定，优先用于拉丁字母段落 - 必须显式设置
float: left和line-height控制下沉效果，否则在 Safari/Chrome 中会和initial-letter叠加出双倍效果 - 推荐用
@supports隔离：先写::first-letterfallback，再用@supports (initial-letter: 1) { ... }覆盖原生属性
示例片段：
p {
initial-letter: 3;
}
@supports not (initial-letter: 1) {
p::first-letter {
float: left;
font-size: 3em;
line-height: 0.7;
margin-right: 0.1em;
}
}
字体、行高、间距联动时容易漏掉的细节
initial-letter 的数值是基于当前 line-height 计算的，不是绝对像素。如果父容器 line-height: 1.5，那么 initial-letter: 3 实际高度 ≈ 字号 × 1.5 × 3。这意味着：
- 换行后第二行文字可能被首字母“顶开”，需检查
margin-top是否意外增大 - 使用等宽字体或超大字号时，首字母宽度可能溢出容器，建议加
overflow: hidden或配合max-width - 若段落有
text-indent，首字母下沉后缩进依然存在，视觉上可能错位，需用text-indent: 0单独重置
真正麻烦的从来不是写对那行 CSS，而是当设计师说“这个首字母要刚好压住第二行中间”，你得来回调 initial-letter 的第二个参数（下沉行数）和 line-height 配合——这没有公式，只能试。
