initial-letter 不适合生产环境，因仅 Safari 16.4+ 原生支持且存在中文字体截断问题，Chrome 119+ 需开启实验标志，Firefox 完全不支持；::first-letter + float 仍是唯一跨浏览器可靠方案。
initial-letter 不适合生产环境，目前只有 Safari 16.4+ 和 Chrome 119+（需开启 flag）支持，Firefox 完全不认；真要绕排文字，::first-letter + float 仍是唯一可靠方案。
initial-letter 为什么不能直接用
它确实是为“首字下沉并绕排”设计的原生属性，语法也简洁：initial-letter: 3 表示下沉占三行高度，initial-letter: 3 2 还能控制悬浮比例。但现实是：
- Chrome 需手动开启
chrome://flags/#enable-experimental-web-platform-features才生效 - Safari 16.4+ 虽默认支持，但在某些中文字体下会截断顶部或基线偏移（尤其思源宋体）
- Firefox 至今无任何实现，
@supports (initial-letter: 3)永远返回 false - 它对中文标点开头的段落行为不一致——有时跳过顿号，有时又把《包进去，无法预测
::first-letter + float 是当前唯一跨浏览器绕排方案
伪元素本身不生成盒，必须配合 float: left 才能触发文字环绕。关键不是“放大”，而是“脱离流 + 控制行高 + 留出右侧空间”：
-
p::first-letter必须作用于这类块级元素，父容器不能是display: flex或display: grid - 必须显式设
line-height: 0.7–0.9，否则放大后的字体按父级line-height拉伸整行，第二行直接压在首字下方 -
margin-right控制环绕间隙，别用padding——浮动元素的 padding 会参与尺寸计算，容易导致后续文字换行错位 - 若首字是中文，确保 HTML 中没有前置空格、换行或注释，否则伪元素找不到“第一个字符”
float 方案里最容易被忽略的盒模型坑
浮动首字的垂直位置不是靠 margin-top 或 vertical-align 调的，而是由三个值共同决定：font-size、line-height、margin-bottom：
-
line-height: 0.8压缩首字自身行框高度，避免撑开整行 -
margin-bottom: -0.3em往下拉，让第二行文字更贴近首字底部（数值需按字体 ascender/descender 实测） - 千万别对
::first-letter设width或height——规范明确禁止，部分浏览器会静默忽略 - 如果父
有border或background，记得加overflow: hidden清除浮动，否则容器高度塌陷
响应式首字下沉必须用 clamp()，不能只靠媒体查询
桌面端 3em 在手机上可能占满半屏，而写死 px 又失去可访问性。正确做法是：
-
font-size: clamp(2rem, 4vw, 3.5rem)——vmin比vw更稳，尤其竖屏手机 -
line-height: clamp(0.7, 3vmin, 0.85)—— 行高也得随视口缩放，固定值在缩放时必然错位 - 避免在
::first-letter上用transform: scale()，它不改变盒尺寸，文字环绕逻辑会乱 - 字体加载期间首字可能短暂塌陷，加
font-display: swap到 @font-face 规则里缓解
真正难的从来不是写出第一版效果，而是换一次字体、加一个图标、切一套新主题时，重新调那几个 line-height 和 margin-bottom 的小数点后一位——不同字体的字怀、x-height、baseline 差异太大，没捷径，只能实测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
