首字下沉最直接用::first-letter，但仅作用于块级元素首个字符；父元素若为flex/grid则失效，需改用span包裹+float或布局对齐，并注意字体加载抖动问题。
首字下沉用 ::first-letter 最直接
浏览器原生支持，不用 JS、不依赖布局模型，兼容性也够用（IE9+、现代所有主流引擎）。关键是要理解它只作用于块级元素的**第一个文字字符**，不是第一个子元素，也不是“看起来像首字”的任意位置。
常见错误现象：::first-letter 完全没生效，或者只在部分字体下变大、其他字体下消失。原因通常是父容器用了 display: flex 或 display: grid —— 这会让内部文本失去块上下文，::first-letter 直接失效。
- 确保父元素是
display: block（默认值即可，别显式覆盖） - 避免给父元素设
overflow: hidden且首字有较大line-height或padding，可能裁切 - 中英文混排时，如果首字符是标点（如《、【、"），
::first-letter仍会选中它，但视觉上不“显眼”，建议前置空格或用
想控制下沉高度和对齐，float: left 是可靠方案
::first-letter 虽然简洁，但对垂直对齐、行高联动、跨行包裹等控制力弱。真要做出杂志级首字效果（比如下沉三行、右侧文字紧密环绕），float: left + 普通 span 包裹首字更可控，而且兼容 IE8。
使用场景：需要精确控制下沉行数、与后续段落文字的 baseline 对齐、或配合背景色/边框做装饰性大字。
立即学习“前端免费学习笔记（深入）”；
- 把首字单独包一层
<span class="dropcap">A</span>，再用 CSS 控制 -
font-size设为3em或具体像素值，配合line-height: 1避免撑高整行 - 用
float: left+margin-right留出文字环绕间隙，别依赖padding，它会影响浮动尺寸计算 - 注意清除浮动影响：后续段落若也
float或display: inline-block，可能错位，加clear: both或用display: flow-root
Flex/Grid 布局里做首字设计，得绕开 ::first-letter
一旦父容器用了 display: flex 或 display: grid，::first-letter 就彻底失效——这不是 bug，是规范行为。此时唯一办法是手动结构化：首字独立成元素，再用布局能力对齐。
性能影响小，但开发成本略升；好处是能和整个布局系统对齐（比如响应式缩放、垂直居中、动画过渡）。
- 不要试图用
grid-area给伪元素定位，::first-letter在 Grid/Flex 中无盒模型 - 推荐写法：
<p><span class="dropcap">T</span>ext continues...</p>，然后对.dropcap应用align-self: start或grid-row: 1 / 4 - 如果首字要随字体大小缩放，用
clamp()替代固定em，例如font-size: clamp(2rem, 8vw, 4rem)
字体加载失败时首字可能塌陷或错位
自定义字体（尤其 WebFont）加载延迟时，浏览器先用 fallback 字体渲染首字，等 WebFont 加载完再替换——这个过程可能导致首字突然“跳动”或尺寸突变，破坏精心调好的下沉效果。
容易被忽略的地方：很多人只加了 @font-face，但没配 font-display: swap 或预加载策略，导致首屏首字反复重绘。
- 务必在
@font-face中声明font-display: swap，让 fallback 字体先撑开空间 - 避免对首字同时设
font-size和transform: scale()，后者在字体切换时易产生模糊或抖动 - 如果用
float方案，记得给.dropcap加will-change: transform（仅当有动画需求），否则多数情况不必
