::first-letter 的 font-size 无效主因是元素非块级上下文，需确保父元素为 block 或 inline-block；浮动首字需配 line-height 和 margin-right；中英文混排受 Unicode 属性影响，中文最稳定；调试应检查首字是否真为文本流首个字符。
为什么 ::first-letter 设了 font-size 却没变大？
常见现象是写了 p::first-letter { font-size: 2em; }，但首字纹丝不动。根本原因通常是该元素不是块级上下文——::first-letter 只对块容器（display: block 或 inline-block 等）生效，而 <span></span>、<a></a> 这类默认 inline 元素直接套用会失效。
- 确保父元素是块级：比如给
p、div或显式加display: block - 避免父元素有
overflow: hidden且首字被裁切（尤其配合浮动时） - 不要在
flex或grid容器的直接子元素上依赖::first-letter，它可能被忽略
::first-letter 浮动后文字错位、换行异常怎么办？
浮动首字本质是把它当作一个“脱离文本流的块”，后续文字会绕排，但若行高、内边距或字体度量不匹配，就容易悬空、压字或断行奇怪。
- 必须配
line-height：比如首字设font-size: 3rem，建议父元素line-height: 1.2起步，再微调 - 用
float: left时，加margin-right: 0.2em避免紧贴后续文字 - 如果首字后接标点（如「——」、「“」），
::first-letter可能捕获不到，因为浏览器只选第一个「字母类字符」；中文没问题，但破折号、引号需确认是否真为首个可渲染字符
中英文混排时 ::first-letter 行为差异
英文按字母切分，中文按字切分，看似一致，但实际受 Unicode 字符属性和浏览器解析影响。比如「（你好」开头，括号是 Ps 类符号，部分旧版 Chrome 不视其为“可首字”；而「Hello 世界」的 H 肯定被捕获。
- 纯中文段落最稳：
你好啊→你被选中 - 英文开头 + 空格 + 中文：空格不算字符，
H仍生效 - 避免用全角标点打头，如「 你好」（中文空格）或「『你好」，兼容性差
- 如需强控制，可用
<span class="dropcap">你</span>好啊手动包裹，比伪元素更可靠
性能与兼容性：哪些地方要特别留心？
::first-letter 本身开销极小，但搭配复杂字体、WebFont 加载未完成、或在大量列表项中批量使用时，可能引发重排抖动，尤其 Safari 对浮动首字的布局计算较慢。
立即学习“前端免费学习笔记（深入）”；
- 移动端 iOS Safari 15.4 前对
font-variant-east-asian等中文字体特性支持弱，放大后笔画可能糊或缺字 - 不要在
will-change: transform元素内部依赖::first-letter，Chrome 有已知渲染异常 - 服务端渲染（SSR）页面若首屏即用，确保 CSS 已内联，否则 Flash of Unstyled Text（FOUT）会暴露未放大的原始首字
、<br>、甚至注释节点，都会让
::first-letter 失效。调试时右键「检查元素」，看 computed 样式里有没有生效的规则，比猜更快。 
