initial-letter在chrome/firefox中不生效，是因为浏览器尚未原生实现该属性：chrome 119+需手动开启实验标志才支持，firefox至今完全不支持，android webview及旧版safari亦无实现。

initial-letter 为什么在 Chrome/Firefox 里完全不生效

它不是“没写对”，而是浏览器压根不识别这个属性。Chrome 119+ 需手动开启 chrome://flags/#enable-experimental-web-platform-features 才能启用，Firefox 至今无任何实现，Android WebView 和旧版 Safari（initial-letter: 3 等于对 80% 用户无效。

::first-letter + float 是当前唯一跨浏览器可靠方案

真正在意首字下沉是否“看得见、排得正、不崩”，必须用 ::first-letter 配合 float: left。这不是退而求其次，而是目前唯一被所有主流引擎稳定支持的路径。

• float: left 是触发文字环绕的唯一方式——不加它，首字只是变大，后续文字不会绕排
• line-height: 0.75 必须显式写，且不能带单位；继承父级行高（如 1.6）会让放大后的首字撑开整行，第二行直接被顶到下方
• font-size 建议用 clamp(2rem, 4vw, 3.5rem)，固定值至少 2.5em；2em 在多数中文字体下视觉上根本看不出下沉感
• 父容器必须是块级且未被设为 display: flex 或 display: grid，否则伪元素静默失效
• HTML 中首字符前不能有换行、空格、注释或内联标签，比如 <p><strong>今</strong>天…</p> 里的 ::first-letter 选不到“今”

移动端首字下沉最容易踩的三个坑

小屏设备上，字体加载延迟、系统缩放、WebView 渲染差异会把本就不稳定的 ::first-letter 推向崩溃边缘。

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• 别用像素单位设 margin-right 或 font-size——用户调大系统字体时，间隙会错位甚至导致换行异常
• 首字位置偏移？加 overflow: hidden 到父 <p></p> 上，强制重排并稳定浮动锚点（iOS Safari 尤其需要）
• 避免用 transform: translateY() 微调垂直位置——它会破坏 baseline 对齐，在双击放大或动态缩放时文字上跳、错行
• 中文以《、【、“等标点开头时，::first-letter 会选中标点而非汉字，结果是引号被放大三倍；需服务端/构建时正则提取首汉字再包裹

为什么你写的 ::first-letter 样式在 DevTools 里根本看不到

它不是被覆盖了，而是浏览器直接忽略——因为环境不合规时，该伪元素根本不生成计算样式。

• 父元素用了 display: flex 或 display: grid：文本流被切断，伪元素不触发
• 首字符前有 HTML 注释或零宽字符：<p><!-- 注释 -->今天…</p>
• 段落以全角中文标点起始：伪元素选中的是《，不是后面的汉字
• 写了 text-transform: uppercase 后又想单独控制原始字符样式：伪元素作用的是转换后的字符，不是 DOM 中的原始文本

真正让首字“沉下去”的从来不是单个属性，而是 float: left、line-height: 0.75、font-size 三者协同的结果；漏掉任何一个，就只是“变大”，不是“下沉”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！