initial-letter 在当前（2026年6月）无法实现首字下沉效果，因支持率不足20%、触发条件苛刻、中文渲染失控，且 Safari/Chrome 仅部分生效、Firefox 和安卓 WebView 完全不支持；可靠方案是用 ::first-letter 配合 float、line-height、响应式 font-size 等手动实现。
initial-letter 在当前（2026年6月）**不能实现“精美”的首字下沉效果**，它连基础可用都达不到。你写 initial-letter: 3，80% 以上的用户看到的仍是普通首字——没有放大、没有下沉、没有环绕。
这不是调参问题，是根本没渲染。
为什么 initial-letter 在生产环境里基本等于没写
它不是“兼容性差一点”，而是触发条件苛刻、支持率极低、中文渲染失控：
-
initial-letter只在 Safari 16.4+ 和 Chrome 120+（需用户手动开启chrome://flags/#enable-experimental-web-platform-features）中部分生效；Firefox 完全无视，Android WebView（含微信、QQ、支付宝内核）无响应 - 全网实际可渲染覆盖率不足 20%，意味着每 5 个访问者中，最多 1 个能看到效果
- 中文段落下常出现首字偏移、底部截断、行高计算失准——因为浏览器没正确计入中文字体的 ascender/descender
- 设
initial-letter: 3 2后，第二行文字并不对齐首字底边，而是按 baseline 对齐，视觉上依然“浮”着 - 它不支持颜色、粗细、text-transform 等样式控制，必须靠
::first-letter覆盖，等于两套规则都要写
initial-letter 的语法和真实行为严重脱节
文档说 initial-letter: 3 表示“占三行高度”，但实际：
- 值必须是整数：
initial-letter: 3.5或initial-letter: 3em直接被忽略，无 warning，静默失败 - 它不继承父元素的
line-height，但受font-size和vertical-align影响，微调要反复试，且不同字体结果差异极大 - 对中文标点开头（如《、【、“）处理不一致：有些版本跳过，有些直接放大标点，导致排版崩坏
- 父容器若为
display: flex或display: grid，initial-letter根本不触发——这点和::first-letter一样，但后者至少 fallback 可控
真正在用的方案：::first-letter 是唯一可靠路径
所有主流移动端浏览器（iOS Safari、Chrome for Android、微信 X5 内核）都稳定支持 ::first-letter，但它不是“设个 font-size 就完事”。缺以下任一，效果就断：
-
float: left：唯一能触发文字环绕的属性；不加它，首字只是变大，后续文字不会绕排 -
line-height: 0.75（无单位）：必须显式设置；继承父段落的line-height: 1.6会让放大后的首字撑开整行，第二行被顶开甚至重叠 -
font-size: clamp(2rem, 4vw, 3.5rem)：固定3em在 iPhone 小屏上可能占半屏，在 iPad 上又太小；响应式写法才是实操底线
额外必须加：margin-right: 0.2em 控制间距，overflow: hidden 在父 上清除浮动，否则高度塌陷、后续段落上移。
别指望 initial-letter “未来会好”，现在就得按现实干活
即使你只面向高端用户，Safari 16.4+ 设备也仅覆盖 iOS 16.4 及以上，而 iOS 16.4 以下存量仍达 15%；Chrome 用户默认关闭实验 flag，主动开启率趋近于零。更关键的是：中文首字下沉的“精美”，取决于字体基线、字形伸展、标点容错、响应式缩放——这些 initial-letter 全都不可控，而 ::first-letter 配合 font-face 加载控制、正则预处理标点、transform: translateY() 微调，反而能稳定交付。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
