::first-letter 渲染异常因盒模型限制、行高冲突及中文字体下沉不足；需设 display: inline-block、单独调 line-height 与 vertical-align，并确保首字符为汉字，safari 等旧浏览器需 initial-letter 降级与 js 检测。
为什么 ::first-letter 渲染出的首字母总不居中、不对齐或被截断
因为浏览器对 ::first-letter 的盒模型处理和普通元素不同：它默认是 inline 级，不响应 margin 垂直方向控制，line-height 和 font-size 放大后容易撑破父容器行高，且部分字体（尤其思源黑体、Noto Sans）在小字号下缺乏足够的字形下沉（descender）空间，导致视觉上“飘”或“卡顶”。
- 必须显式设
display: block或display: inline-block才能用margin/padding精确定位 -
line-height要配合font-size单独调——建议父元素设line-height: 1.6，::first-letter设line-height: 1避免上下挤压 - 用
vertical-align: bottom或top替代margin-top，更稳定 - 中文出版物常用「下沉两行」效果，可设
font-size: 3em+line-height: 0.7+vertical-align: bottom
如何让 ::first-letter 在中文段落里正确选中「第一个汉字」而非标点或空格
默认行为会把开头的全角空格、破折号、引号甚至 当作“第一个字符”，导致缩放错位。CSS 本身不提供字符过滤逻辑，需靠 HTML 结构规避。
- 确保段落开头直接是汉字，删掉首行所有不可见字符（可用编辑器显示隐藏符号验证）
- 避免用
“你好这类带前导标点的写法；如必须，改用<span class="dropcap">你</span>好…手动包裹 - 若内容来自 CMS 或用户输入，服务端/前端需预处理：用正则
/^[^\u4e00-\u9fa5\u3400-\u4dbf\uf900-\ufaff]+/去掉开头非汉字字符 - 不要依赖
::first-letter处理多字缩写（如「中华人民共和国」取「中」），它只匹配单个 Unicode 字符
::first-letter 在 Safari 和旧版 Edge 中的兼容性陷阱
Safari（≤16.4）对中文 ::first-letter 支持极差：常完全不渲染、或仅渲染为小号普通文字；Edge 18 及更早版本不支持中文字符的首字母选择（只认拉丁字母）。
- 必须加降级：用
initial-letter: 3 2（现代标准）+::first-letter双声明，Safari 16.5+ 优先走initial-letter - 对不支持的浏览器，用 JS 检测：
if (!CSS.supports('initial-letter', '3')) { /* 插入 <span class="fallback-dropcap"> */ }</span> - 避免在
<p></p>内嵌<a></a>或<em></em>—— Safari 会把链接文字当首字符，导致样式错乱 - 测试时务必用真机 Safari，模拟器常误报支持
怎样用 ::first-letter 实现「传统铅印风格」的衬线+下沉+边框组合
核心是字体、尺寸、位置、装饰四要素叠加，且每项都需针对中文优化。直接套用英文排版参数（如 font-family: "Times New Roman"）会导致字重失衡、字宽过窄。
- 字体选
font-family: "Noto Serif SC", "Source Han Serif SC", serif—— 专为中文优化的衬线体，x-height 合理 - 下沉量按行数算：设
font-size: 4.2em（对应约 3 行高度），line-height: 0.65控制字形垂直压缩 - 加微边框提升印刷感：
border: 0.08em solid #333+border-radius: 0.15em - 右侧留白防挤：
margin-right: 0.25em（不能用padding，会扩大点击热区） - 最后补一句：
color: #222—— 别信默认黑色，印刷灰度要手动压低
真正难的不是代码，是反复调 line-height 和 vertical-align 的那 0.05em 差距；同一组参数换三款字体，可能就要重调两次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
