首字下沉需用 ::first-letter 配合 float: left 实现，仅放大字体无效；须确保段落首字符为纯文本，避免空格、换行或内联标签干扰，并注意中文字体 baseline 不统一问题。
用 first-letter 伪元素实现首字下沉
HTML 本身不提供“首字下沉”语义标签，得靠 CSS 的 ::first-letter 伪元素控制。它专门匹配段落（）或块级容器中第一个**字母、数字或标点**，但前提是该字符必须是文本内容的真正开头（不能被 、 等内联元素包裹，否则选不到）。
常见错误是直接写 p::first-letter { font-size: 2em; } 却没生效——大概率因为段落开头有空格、换行符或 HTML 注释，导致伪元素找不到“第一个字”。
实操建议：
- 确保
标签内第一字符就是目标汉字/字母，前后不要有空格或换行 - 给
::first-letter设置float: left是关键，否则即使放大也不会“下沉”效果（只是变大） - 配合
line-height和margin-right调整环绕间距，避免文字紧贴下沉字 - 注意字体渲染差异：中文字体下
font-size放大后可能触发不同 hinting 行为，某些字号组合会显得偏高或偏矮
float: left 必须加，否则不是“下沉”是“放大”
只改 font-size 或 line-height 不会形成传统排版里的首字下沉效果——那只是个大号字浮在行首。真正下沉需要文字环绕，而 CSS 中只有 float: left（或 right）能触发文本流环绕行为。
立即学习“前端免费学习笔记（深入）”；
典型误操作：
-
p::first-letter { font-size: 3rem; }→ 字变大，但第二行文字从同一基线开始，没“沉下去” -
p::first-letter { float: left; font-size: 3rem; }→ 正确起点，后续文字自动绕排 - 如果段落用了
display: flex或display: grid，::first-letter会失效（伪元素不适用于非块盒）
中文场景下要注意字体、行高与盒模型的隐式影响
英文首字下沉常基于字母高度设计，但汉字字形方正、baseline 定义模糊，font-size 放大后容易和行框（line box）冲突。浏览器默认把下沉字当“行内替换元素”处理，其 vertical-align 默认是 baseline，但汉字 baseline 实际位置不统一，结果常出现下沉不足或过度。
稳妥做法：
- 显式设置
vertical-align: top或text-top，再微调margin-top - 给父
加line-height: 1.6类似值，避免因行高过小导致第二行文字顶到下沉字底部 - 避免在
::first-letter上设padding或border——部分旧版 Safari 对中文首字的盒模型计算异常 - 如需兼容 IE，得用
first-letter（单冒号），但 IE11 及以下对中文支持极差，基本不可靠
响应式下首字下沉容易错位，别依赖固定像素值
用 px 或 rem 固定下沉字大小，在小屏上可能撑破容器，或让环绕文字行数剧增。更合理的是结合 em 单位和容器宽度动态约束。
可操作方案：
- 用
font-size: 4em（相对于父的字号），而非48px，保证比例一致 - 给
::first-letter加max-width: 20%防止超宽（尤其遇到“一”“二”等窄字时） - 媒体查询中单独重置
font-size和line-height，比如@media (max-width: 480px) { p::first-letter { font-size: 2.5em; line-height: 1.2; } } - 别忘了测试 iOS Safari —— 它对
::first-letter + float在viewport缩放后偶发重绘失败
首字下沉看着简单，但中文字体、浮动机制、行盒计算三者叠加，任意一个参数偏移几像素，视觉节奏就全乱了。最稳的方式是先在桌面端调准比例，再逐屏检查环绕是否自然，而不是堆样式完事。
