::first-letter缩放首字需设具体font-size、line-height（推荐1）和vertical-align（如top），避免overflow:hidden；注意字体加载跳变及移动端截断问题。
first-letter伪元素缩放首字的基本写法
直接用 ::first-letter 配合 font-size 就能放大首字，但默认会继承父级行高和垂直对齐方式，导致视觉上“飘”或“压线”。关键不是放大本身，而是让放大后的字稳稳坐在文本基线上。
常见错误现象：::first-letter 放大后顶部被截断、底部悬空、跟第二行文字错位。
-
font-size必须设为具体值（如3em），不能用inherit或unset - 必须显式设置
line-height（推荐1或1.1），否则浏览器按原始行高渲染，放大字会被“挤”变形 - 加
vertical-align: top或vertical-align: text-top比默认的baseline更可控 - 避免给父容器设
overflow: hidden—— 放大字可能超出容器边界，尤其顶部
行高与首字定位的微调关系
行高不是装饰参数，它决定首字的“锚点位置”。line-height: 1 让首字上下留白归零，此时 vertical-align 才真正起作用；而 line-height: 1.4 会让首字在行框内自动居中，反而失去对齐主动权。
使用场景：杂志式排版、引言段落、标题导语——需要首字下沉或顶格时，line-height 是比 margin 或 transform 更轻量、更符合语义的调节手段。
立即学习“前端免费学习笔记（深入）”；
- 想让首字“沉下去”：用
line-height: 0.8+vertical-align: bottom - 想让首字“顶上去”：用
line-height: 0.9+vertical-align: top - 兼容性注意：IE 不支持
line-height小于1的::first-letter渲染，实际项目中建议下限设为0.95
字体加载与first-letter的渲染时机问题
自定义字体（如 @font-face 引入的衬线体）加载完成前，浏览器会先用系统字体渲染 ::first-letter，等字体就绪后重绘——这时常出现首字突然“跳变”，大小/位置/字形全变。
这不是 CSS 写错了，是字体加载策略没对齐。最稳妥的做法不是等 font-display: swap，而是提前占位。
- 给
::first-letter加font-family显式声明，且必须与正文一致（哪怕只是临时写个"Georgia", serif） - 避免在
::first-letter中用font-weight: bold却没加载对应字重，会导致回退到常规字重并重排 - 若用 Web Font Loader 等工具，可在
active回调里加一个 class 触发重绘，比纯 CSS 更可靠
移动端适配中first-letter的意外截断
在 iOS Safari 和部分安卓 WebView 中，::first-letter 放大后容易被视口或父容器裁切，尤其当段落有 padding-left 或外层用了 text-indent 时。
根本原因不是缩放本身，而是浏览器对伪元素盒模型的计算偏差：它把放大字当成普通内联内容，却没预留足够水平空间。
- 给段落加
padding-left: 0.2em（非text-indent）可缓解左侧挤压 - 禁用
text-rendering: optimizeLegibility—— 这个属性在某些版本 Safari 中会加剧首字错位 - 真机调试时务必检查
zoom和viewport缩放是否被触发，user-scalable=no可能掩盖真实布局问题
首字缩放看着简单，但真正稳住位置靠的不是技巧堆砌，而是对行框模型、字体加载周期、移动端渲染差异这三块的交叉判断。改一行 line-height 可能解决 80% 的错位，但剩下那 20%，得看是不是在错误的时间、错误的容器里，强行放大了一个还没加载完的字体。
