::first-letter伪元素实现首字下沉需作用于块级元素，设float:left和font-size≥2em，并注意中文标点开头问题；initial-letter为未来方案但兼容性差，当前仍以::first-letter为主。
用 ::first-letter 伪元素最直接
首字下沉本质是让段落第一个字符单独成块、放大并浮动左上，::first-letter 就是为此设计的。它只作用于块级元素（如 p、div）开头的**第一个字母或汉字**，不触发重排，性能也够用。
常见错误是套在 span 或行内元素上——它会失效；或者没设 float: left，导致字体变大但没“沉”下去。
-
font-size至少设为2em起，太小看不出下沉效果 - 必须配合
float: left，否则文字仍按正常流排布 - 建议加
line-height: 1控制首字行高，避免和第二行文字挤在一起 - 中文场景下，确保父容器
text-align: justify或留足右侧空间，否则首字可能把后续文字顶出可视区
中文首字下沉要防「标点开头」的坑
如果段落以顿号、引号、括号等标点起始，::first-letter 会选中它，而不是你想要的汉字——结果就是标点被放大，难看还误导阅读。
这不是浏览器 bug，是规范定义：它取的是「Unicode 字母类字符」的第一个，而很多中文标点不属于该类，但部分全角符号（如《》“”）会被识别为可选首字。
立即学习“前端免费学习笔记（深入）”；
- 上线前务必检查真实内容，尤其 CMS 导入或用户输入的段落
- 简单解法：服务端或 JS 预处理，把段首非汉字/字母的字符移走（比如用正则
^[\u3000-\u303f\uf900-\uf9fc\uff00-\uffef\u2000-\u206f\uff01-\uff5e]+匹配开头标点） - 纯 CSS 没法跳过标点选第二个字，别硬扛
initial-letter 是未来方案，但现在别依赖
initial-letter 是 CSS Inline Layout Level 3 提的新属性，支持更精细控制下沉行数、对齐方式，比如 initial-letter: 3 表示下沉占三行高度。
但它目前只有 Safari 16.4+ 和 Chrome 119+（需开启 flag）支持，Firefox 完全不认。用在生产环境等于放弃 80% 用户。
- 查兼容性看 caniuse，别只信 MDN 的「实验性」标注
- 若真要用，得写降级：
::first-letter作为 fallback，@supports (initial-letter: 3)里覆盖 - 注意
initial-letter对中文支持不稳定，某些字体下首字会偏移或截断
行高与边距容易错配，得手动调
下沉后的首字和后续文字之间，默认靠 line-height 和 margin 协同控制间隙。但不同字体的字怀（counter）、上下伸展（ascender/descender）差异大，同一套 CSS 在思源黑体和宋体下表现可能差一倍。
- 优先调
margin-right控制首字和后续文字间距，0.2em～0.3em较稳妥 - 避免用
padding，它会撑开容器，影响整体行距节奏 - 如果段落用了
line-height: 1.6，首字line-height建议设为1，否则可能拉高整段行高 - 移动端需额外测试：小屏下字体渲染缩放会让下沉比例失真，建议用
rem或em，不用固定px
真正麻烦的不是怎么写，而是每换一种字体、每加一个 CMS 字段、每次改版适配响应式，都得重新肉眼校一遍首字对齐和呼吸感——这东西没法自动化，只能压进 QA checklist。
