::first-letter 设置 font-size 后行高错乱的根本原因是其伪元素以 inline 方式参与布局并继承父 line-height，放大首字母后浏览器按替换元素规则重算行高基线，导致整行视觉偏移；需同时设置 line-height: 1 和 vertical-align（如 text-top）并慎用 display: block。
为什么 ::first-letter 设置 font-size 后行高错乱
根本原因是 ::first-letter 生成的伪元素默认以 inline 方式参与行内布局，而它又继承了父元素的 line-height。当你单独放大首字母时，浏览器会按“行内替换元素”规则重新计算该行的行高基线，导致整行视觉上被顶高或下沉。
常见表现：段落第一行文字底部对不齐、上下留白异常、与相邻段落间距突变。
- 父容器若设了
line-height: 1.5，首字母又设font-size: 2em，实际行高可能撑到3em以上 -
vertical-align默认是baseline，大字号首字母的基线位置远低于普通文字，拉低整行 - 部分字体（如思源黑体、Noto Sans）在小字号下 hinting 行为不同，放大后字形下沉更明显
::first-letter 中如何安全控制 font-size 和 line-height
关键不是“禁用继承”，而是主动接管行高计算逻辑。必须同时设置 line-height 和 vertical-align，且优先级高于父级。
- 给
::first-letter显式设line-height: 1（无单位），避免继承父级缩放值 - 搭配
vertical-align: top或vertical-align: text-top，让大写字母顶部对齐文本框上沿 - 若需微调垂直位置，用
margin-top替代vertical-align（更可控，不触发重排） - 慎用
display: block——虽能脱离行内流，但会破坏段首缩进、影响text-indent行为
blockquote::first-letter {
font-size: 3rem;
line-height: 1;
vertical-align: text-top;
margin-top: -0.1em; /* 小幅上提补偿字体下沉 */
}字体加载阶段导致的首字母样式闪烁怎么办
自定义字体（如 @font-face 加载中）时，浏览器先用 fallback 字体渲染 ::first-letter，等 Web Font 就绪后重绘，造成尺寸跳变。这不是 CSS 冲突，而是字体回退机制问题。
立即学习“前端免费学习笔记（深入）”；
- 用
font-display: optional或swap控制 fallback 行为，但无法完全消除跳变 - 更稳方案：对
::first-letter单独指定字体栈，确保 fallback 字体与 Web Font 的 x-height / ascender 高度接近（例如都选 sans-serif 类） - 极端情况可 JS 检测字体加载完成后再添加 class，延迟应用
::first-letter样式
哪些字体属性在 ::first-letter 里实际无效
不是所有文本相关属性都支持。CSS 规范明确限制了伪元素的可继承性，尤其涉及排版底层控制的部分。
-
font-variant-ligatures、font-kerning：多数浏览器忽略 -
letter-spacing：有效，但值过大时可能让首字母与后续文字断开过远 -
text-transform：仅对 ASCII 字母生效，中文/日文无效 -
font-feature-settings：Chrome 支持，Firefox 需加前缀，Safari 仅部分支持
真正要盯住的只有三个：大小、行高、垂直对齐。其他都是锦上添花，且容易因浏览器差异出问题。
