initial-letter在移动端基本不可用，因仅Safari 16.4+和Chrome 120+（需手动开启实验功能）部分支持，Firefox、Android WebView等完全不识别，实际覆盖率不足20%；可靠方案是::first-letter配合float、line-height和响应式font-size。
initial-letter 在移动端不能用，不是参数没调对，而是绝大多数设备压根不解析这个属性。
initial-letter 为什么在 iOS/Android 上基本失效
- Safari 16.4+ 仅部分支持，且仅限于某些字体和纯文本结构；iOS 16.3 及更早版本（仍占存量约 15%）完全无视
- Chrome for Android 需手动开启
chrome://flags/#enable-experimental-web-platform-features，默认关闭，用户几乎不会开 - Firefox for Android、所有主流 Android WebView（包括微信、QQ、支付宝内核）、Samsung Internet 全部不识别该属性
- 实际可渲染覆盖率在 2026 年 Q1 不足 20%，意味着每 5 个真实用户中，4 个看到的仍是普通首字
你写 initial-letter: 3，80% 的流量下它就像没写过一样——没有报错，也不生效，DevTools 里 computed 样式为空。
为什么不能靠 @supports (initial-letter: 3) 降级兜底
-
@supports检测通过 ≠ 渲染正确：Safari 16.4+ 虽返回 true，但中文段落中常出现首字偏移、顶部截断、右侧文字断行异常 - 它不继承父元素的
color、font-weight、text-transform，必须额外用::first-letter覆盖样式，等于两套逻辑并存 - 中文标点开头（如《、【、“）行为不一致：有些版本跳过，有些放大标点，无法预测
- 值必须是整数，
initial-letter: 3.5或initial-letter: 3em直接被忽略，容错极低
单纯加 @supports 不解决实际问题，反而增加维护成本和 CSS 条件分支复杂度。
移动端真正可用的方案只有 ::first-letter
它在所有现代移动浏览器（含 iOS Safari、Chrome for Android、Firefox for Android、微信 X5 内核）中稳定支持，但必须满足三个硬性条件：
立即学习“前端免费学习笔记（深入）”；
- 目标元素是块级容器（
<p>、<div>），且不能是display: flex或display: grid的直接子元素 - 首字符前无空格、换行、HTML 注释或内联标签包裹（例如
<p><strong>今</strong>天</p>中的::first-letter不生效） - 必须同时设置以下三者，缺一不可：
-
float: left—— 触发文字环绕的唯一方式 -
font-size: clamp(2rem, 4vw, 3.5rem)—— 避免小屏溢出、大屏过小 -
line-height: 0.75—— 无单位值，压制首字自身行框，防止撑开整行
-
额外建议：margin-right: 0.2em 控制间距，父容器加 overflow: hidden 清除浮动，比 clear: both 更轻量。
真正容易被忽略的是：中文首字是否为汉字本身，取决于 HTML 源码结构。CMS 输出或用户输入的段落若以全角引号、顿号、括号开头，::first-letter 就会放大那个标点——这不是 bug，是规范行为。线上项目必须预处理或前端正则检测，否则排版失控。
