首字下沉纯靠CSS ::first-letter伪元素实现，需同时设置float: left、line-height: 0.75和足够大的font-size（至少2.5em），并注意中文字体、换行符、嵌套标签及标点开头等常见失效场景。
首字下沉不是靠 HTML 标签实现的，<first-letter> 不存在，<dropcap> 不是标准元素——纯靠 CSS 的 ::first-letter 伪元素控制。
为什么写了 ::first-letter 却没效果
不是选择器写错了，而是浏览器根本没触发这个伪元素。常见硬性失效原因：
- 父元素用了
display: flex或display: grid—— 文本流被切断，::first-letter静默忽略 -
<p>开头有换行、空格或 HTML 注释，比如<p>\n 今天…</p>，首字符前实际是换行符 - 首字被
<strong>、<em>包裹，例如<p><strong>今</strong>天…</p>，伪元素不认嵌套里的“今” - 段落以中文标点开头，如《、【、”——
::first-letter会选中标点而非汉字，放大后是引号下沉
::first-letter 必须配齐的三个 CSS 属性
只设 font-size 是放大，不是下沉。真正实现环绕式下沉，这三项缺一不可：
-
float: left：让首字脱离文档流，正文才能绕排；不加它，文字全被顶到下一行 -
line-height: 0.75（无单位）：压制首字自身行框高度；继承父级line-height: 1.6会导致放大后整行被撑高 -
font-size: clamp(2rem, 4vw, 3.5rem)：响应式推荐写法；固定值至少2.5em，2em在多数中文字体下视觉无下沉感
顺手加上 margin-right: 0.2em 控制间隙，再给 <p> 加 overflow: hidden 清除浮动，避免后续内容上移重叠。
立即学习“前端免费学习笔记（深入）”；
中文段落特别容易踩的坑
中文没有基线概念，同一套样式在不同字体下表现差异极大：
- 思源黑体放大后字形发虚，建议显式指定衬线类字体，如
"Noto Serif CJK SC"、"SimSun" -
line-height: 0.75在“你”字上可能刚好，在“龍”字上却裁切顶部——得真机多测几个常用汉字 - 移动端 viewport 缩放时，
em可能溢出，clamp()或rem更稳；小屏建议用媒体查询降为font-size: 1.8rem并减小margin-right - 富文本编辑器输出的 HTML 常带换行或空格，前端无法控制时，只能退回到手动包裹
<span class="dropcap">今</span>+ JS 预处理
真正麻烦的是混排：首字是 emoji、英文缩写（如 “iOS”）、或全角破折号——::first-letter 行为依赖字体和 Unicode 版本，没法统一兜底，上线前必须拿真实数据在 iOS Safari、Chrome Android、Edge 上各跑一遍。
