TYPOGRAPHY
引文块Blockquote
左侧一道竖线 + 斜体金句 + 署名——把一句话从正文中"拎"出来。
效果预览
"
工具的终极形态，是让你忘记工具的存在。
—— 《慢即是快》第二章适合用在哪
文章金句、访谈摘录、推荐语、章节开篇题词。
容易踩的坑
- 用 blockquote 只为缩进普通段落，读屏会误报为引用，语义被滥用。
- 装饰大引号没加 aria-hidden，读屏会念出「左双引号」打断朗读。
- Pull Quote 与正文重复出现，读屏用户会把同一句话听两遍，应对其隐藏。
设计提示词 · Prompt
引文块（Blockquote）：左边框 3px 品牌色（或粗细 2-4px）+ 左内边距 16-24px；文字比正文大 1-2 级、斜体（中文可用楷体/仿宋替代斜体）、行高 1.7；cite 署名右对齐或左对齐、13px 灰色、前置破折号。装饰变体：超大引号字符（Georgia 80-120px、8-12% 透明度）绝对定位在左上角。Pull Quote 变体（杂志风）：居中、两侧短横线、字号 24-32px，用于从正文里"提纯"一句最响的话。引文内容必须真的来自原文。
Blockquote: a 3px brand-color left border (or 2-4px) + 16-24px left padding; text 1-2 steps larger than body, italic (for Chinese, Kaiti/Fangsong can replace italics), line-height 1.7; the cite attribution right- or left-aligned, 13px gray, preceded by a dash. Decorative variant: an oversized quotation mark character (Georgia 80-120px, 8-12% opacity) absolutely positioned at the top left. Pull Quote variant (magazine style): centered, short dashes on both sides, 24-32px, used to "distill" the loudest sentence from the body. The quoted content must genuinely come from the source.
常见搭配
同一页面里经常和「引文块」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-blockquote"> <span class="d-blockquote__q">"</span> <p>工具的终极形态，是让你忘记工具的存在。</p> <cite>—— 《慢即是快》第二章</cite> </div>