首字下沉是纯视觉效果，无HTML语义标签支持，需用CSS ::first-letter伪元素实现；它仅作用于块级元素，对中文有效但要求首字符无前置空白；兼容IE8需手动包裹首字；响应式下需用相对单位并设媒体查询。
首字下沉不是语义，而是纯视觉效果
HTML 本身没有“首字下沉”的语义标签，<first-letter> 不存在，<dropcap> 也不是标准元素。所谓“语义结构”在这里是个常见误解——浏览器不识别段落首字的特殊语义，只渲染样式。真正能表达语义的是 <p>、<article> 这类容器，首字下沉只是对其中第一个字符的视觉强化。
用 CSS ::first-letter 实现最简方案
现代浏览器都支持伪元素 ::first-letter，它精准匹配段落首个字母（或汉字、标点等），是实现首字下沉的唯一可靠方式：
p::first-letter {
font-size: 3em;
line-height: 1;
float: left;
margin-right: 0.2em;
}
注意几个关键点：
-
::first-letter只作用于块级元素（如<p>），对<span>或内联元素无效 - 中文首字也能生效，但需确保该字符未被空格、换行符或 HTML 注释前置（比如
<p>\n 今天…中的换行会让::first-letter失效） -
float: left是必须的，否则大字号会撑高整行，破坏行高对齐 - 避免用
display: block或inline-block，它们会破坏伪元素的默认流式行为
兼容老浏览器时的 fallback 策略
IE8 及更早版本不支持 ::first-letter（只认旧式 :first-letter 单冒号写法），且对中文支持不稳定。若必须兼容：
立即学习“前端免费学习笔记（深入）”；
- 手动包裹首字：把
<p>今天天气好</p>改成<p><span class="dropcap">今</span>天天气好</p>，再给.dropcap写样式 - 不要依赖 JavaScript 动态插入，首屏渲染延迟会导致文字闪动
- 避免用
text-indent或负margin模拟，容易在缩放或不同字体下错位
响应式场景下容易忽略的细节
首字下沉在小屏幕常会挤占太多横向空间，导致后续文字换行异常：
- 用
em或rem而非px控制font-size，保证随根字号缩放 - 添加媒体查询，例如在
max-width: 480px时重置为font-size: 1.5em并减小margin-right - 如果段落含
<strong>或<em>开头，::first-letter仍会选中其内部字符，无需额外处理
真正麻烦的是混排场景：当首字是标点（如“！今天…”）、英文缩写（如“iOS 开发…”）或 emoji，::first-letter 的行为可能因字体和 Unicode 版本而异，测试时得真机多看几遍。
