TYPOGRAPHY
首字下沉Drop Cap
段落第一个字放大下沉占两三行，杂志排版的经典开场仪式感。
效果预览
二〇二六年的春天，我把公司搬进了自己的笔记本电脑。没有会议室，没有打卡机，只有一个决定：把每一件重复的事都交给系统。三个月后我才发现，真正难的不是写代码，而是敢于删掉那些"看起来很重要"的流程。
适合用在哪
长文正文开头、杂志式博客、品牌故事。
容易踩的坑
- 用 float 实现时首字与第二行间距不统一，不同字体下会出现字母悬空或压行。
- 首字用独立 span 包裹后读屏可能把首字单独念出，造成单词被拆开。
- 移动端正文仅 16px 时首字放大 4 倍会占去半行宽度，挤压后续文字。
设计提示词 · Prompt
首字下沉（Drop Cap）：::first-letter 伪元素——float:left、font-size 约 3-4 倍正文（64-80px）、line-height:0.8-0.9、右下外边距 8-12px、可用品牌色或衬线字体。只用在文章第一段，全篇都下沉就成了噪音。中文首字下沉用得少（方块字下沉易显突兀），更适合英文排版或中文杂志风谨慎使用。注意 ::first-letter 会选中前置标点（引号），处理开场引号的文章要手动包 span 实现。与 justify 两端对齐搭配最有印刷味。
Drop Cap: the ::first-letter pseudo-element — float:left, font-size about 3-4x the body text (64-80px), line-height:0.8-0.9, 8-12px outer margin on the right and bottom, optionally in the brand color or a serif typeface. Use it only on the article's first paragraph; drop caps throughout the article become noise. Drop caps are rarely used in Chinese (dropped square characters easily look awkward); they suit English typography better, or Chinese magazine styles with caution. Note that ::first-letter also selects leading punctuation (quotation marks); for articles opening with a quotation mark, wrap a span manually. Pairs with justify for the most print-like feel.
常见搭配
同一页面里经常和「首字下沉」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-dropcapdemo"> 二〇二六年的春天，我把公司搬进了自己的笔记本电脑。没有会议室，没有打卡机，只有一个决定：把每一件重复的事都交给系统。三个月后我才发现，真正难的不是写代码，而是敢于删掉那些"看起来很重要"的流程。 </div>