::first-letter是实现首字下沉最语义化的方式，但需满足块级容器、无前置内联元素、无样式覆盖三前提，否则静默失效；中文字体兼容性差，多音字和标点开头支持弱，推荐用HTML显式包裹替代。
::first-letter 是最直接、语义最干净的实现方式，但必须满足块级容器、无前置内联元素、无样式覆盖三个前提，否则会静默失效。
为什么 ::first-letter 有时完全不生效
常见错误现象：写了样式但首字大小/浮动毫无反应；开发者工具里能看到规则被划掉（strikethrough）；或只在部分段落生效。
-
::first-letter只作用于块级元素，<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a> <p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p> </div> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>没问题，但若父容器是display: inline或未设宽高的div，可能被当作内联上下文忽略 - 首字符前有空格、换行、
<span></span>、<strong></strong>等内联节点时，伪元素会定位失败——浏览器认为“第一个字母”不在段落文本流起始位置 - 其他 CSS 规则（如全局
p { font-size: 14px; }）可能通过层叠覆盖::first-letter的font-size，需检查 specificity 和 !important 使用
float + line-height 组合的关键参数怎么调
下沉效果是否自然，取决于三组数值的协同：字体放大倍数、行高压缩比、垂直负边距。调错一个，就会出现文字上浮、挤压下一行、或与后续字粘连。
-
font-size: 3em是安全起点，中文建议用2.8em–3.2em，避免过大的字撑破容器宽度 -
line-height: 0.7–0.9控制下沉深度，值越小下沉越深；但低于0.65容易导致字形截断（尤其思源黑体、Noto Sans 等开源字体） -
margin-bottom: -0.15em补偿因line-height压缩造成的视觉上移，负值过大则第二行文字会“钻进”下沉字底部 - 父级
<p></p>必须设line-height: 1.6或更高，否则后续行间距会被下沉字的浮动挤窄
中文字体下的兼容性陷阱
中文首字下沉比英文更难稳定，核心问题是字体度量（metrics）差异大，同一套 CSS 在“微软雅黑”“苹方”“HarmonyOS Sans”下表现可能完全不同。
立即学习“前端免费学习笔记（深入）”；
-
::first-letter对多音字、带标点的开头（如“《论语》曰…”）支持极差，某些浏览器会把书名号当首字符，跳过汉字 - 不推荐依赖
text-transform: uppercase强转首字大写——中文无大小写概念，该属性对汉字无效，且可能干扰渲染 - 若需 100% 可控，改用显式 HTML 包裹：
<p><span class="dropcap">春</span>风拂面…</p>，再对.dropcap单独设样式，绕过伪元素不确定性 - 使用
@font-face加载字体时，确保 fallback 字体（如font-family: "PingFang SC", "Hiragino Sans GB", sans-serif;）在首字渲染阶段已就绪，否则 FOUT 期间可能回退到系统默认字体，破坏下沉对齐
真正麻烦的不是写几行 CSS，而是验证它在 iOS Safari、Chrome Android、微信内置浏览器里是否都按预期下沉——尤其是当段落含 emoji、数字或中英混排时，::first-letter 的行为边界非常模糊。动手前先打开真机调试器，别只信桌面模拟器。
