::first-letter仅作用于块级容器首字母或标点，需排除空白符与兼容性问题，配合float、line-height及移动端可访问性优化使用。
first-letter伪元素的基本用法和限制
::first-letter 只能作用于块级容器（如 <p></p>、<div>）中的**第一个字母或标点符号**，且该容器必须有明确的渲染盒（不能是 <code>display: none 或 visibility: hidden）。它不适用于内联元素直接包裹的文本，也不支持对 <span></span> 这类非块级元素单独使用。
常见错误是给 <span></span> 加 ::first-letter 却没生效——因为 <span></span> 默认是内联元素，没有生成独立的块盒。解决方法是加 display: block 或 display: inline-block（但后者在某些浏览器中可能触发兼容问题）。
放大首字母时字体大小与行高如何协调
单纯设置 font-size 会让首字母“撑高”整行，导致上下行间距错乱。关键在于控制 line-height 和 float 的配合：
- 推荐用
float: left让首字母脱离文档流，再配合适当的line-height（通常设为1）避免影响后续文字基线 -
font-size建议用em或rem，比如font-size: 3em，这样能随父级字号缩放 - 如果不用
float，改用display: inline-block+vertical-align: top也能控制对齐，但需手动调margin-top补偿下沉
示例：
p::first-letter {
float: left;
font-size: 4em;
line-height: 1;
margin-right: 0.1em;
}
中文首字放大失效？注意 Unicode 和标点边界
::first-letter 在中文场景下容易“失焦”，原因有两个：
- 开头有空格、换行符或全角空格（
- 开头是中文标点（如《、【、“），部分旧版 Safari/Edge 不识别其为“可选首字符”，导致样式不应用
解决办法：确保 HTML 中段落开头紧接汉字，不要留空格；若必须保留格式空格，可用 替代普通空格（ 不被视作“首字符”）；对兼容性要求高的项目，建议用 <span class="dropcap">第</span> 手动包裹首字并写 CSS。
移动端适配和可访问性隐患
放大首字母后，iOS Safari 有时会误判为“可缩放文本”，触发双击放大；同时屏幕阅读器可能跳过或重复读首字母。规避方式：
- 加
-webkit-text-size-adjust: none（仅限 iOS<meta name="viewport">已设user-scalable=no时有效） - 避免用
font-size超过2.5em，否则小屏上易溢出容器 - 别依赖
::first-letter传递关键信息——它不属于 DOM 节点，无法被 JS 获取或 aria 属性增强
真正需要语义化强调的首字，还是得靠 HTML 显式标记，::first-letter 本质只是视觉装饰层。
