排版样张

周乐 · Joey 原创

笔记 · 首发 2026-07-26 · 最后修改 2026-07-26

#排版

这一页不是文章，是样张。它把规范第 5.5 节表里的每一种标记各放一份，方便按第 13 节的 验收清单逐条核对。行长应当锁在 34 个汉字——这一段正好可以拿来数。

行内标记

加粗只到 500，不到 700，也不整句加粗。中文的强调用着重号， 斜体只留给西文与变量名，像 useState 或者 lorem ipsum。高亮一段只准有一处， 并且只标结论句。

行内代码写成 npm run build，键帽写成 ⌘ K。上标像这样 x²， 缩写首现给「层叠样式表（CSS）」，之后就写 CSS。

改错的时候原文不删：行长是 640px 行长是 592px。

外部链接会自己长出箭头，比如 Quartz；站内链接不长。 邮箱不是链接，写成 joey at joeyspace.com。

三种提示块

提示块只有三种，靠 mono 标签区分，不靠底色也不靠图标。

注意

这一条是需要读者停一下的东西。左边是 2px 墨色竖线。

更正 · 2026-07-26

更正必须带日期，而且原文不删——上面那个 <del> 就是这个规矩的例子。

题外话

题外话用楷体灰字，读者跳过它不影响主线。

列表

无序列表用 4×4 的实心方点：

• 第一项
• 第二项
  • 次级用空心方点
  • 最多只到两级
• 第三项

有序列表的序号是 mono，右对齐，不写「1.」后面那个点：

1. 先量行长
2. 再数间距档位
3. 最后查颜色

任务列表用 11×11 的方框：

• 令牌层
• 中文排版
• 图谱视觉编码（P1）

术语表用定义列表：

秋香 : 只填充，任一时刻视口内只允许出现一处。

深金 : 只写字与 1px 线，永不填充。

引用

秋香对纸底 2.4:1，不满足 WCAG 1.4.11 的 3:1，所以不能做线。

网站实现规范 5.2

代码

quartz/styles/joeyspace/_links.scss

a {
  color: var(--ink)
  textDecorationColor: var(--gold-deep)
  textDecorationThickness: 1
}

表格

三线表：表头下一条墨线，行线浅一档，没有竖线也没有斑马纹。

令牌	值	用途
--ink	#191919	标题、内链文字、标识
--ink-soft	#353535	正文
--gold	#C9A227	秋香，只填充

公式

行内公式压在行高里不撑段落，像 $E=m{c}^2$ 这样。块级公式上下各留一条细线：

$$\text{行长}=34\times (17+17\times 0.025)\approx 592$$

图

插图 · 迁移前后目录结构对照 592×280

图注永远在图下方左对齐，用楷体 14.5。素材到位前一律保持占位。

折叠块

折叠块只装可选材料，正文主线不许放进去。

为什么行长写死 592 而不是用 ch

ch 量的是「0」这个字形的宽度，中文里没有对应物。34 个汉字乘以 17px 再加上 .025em 的字距，结果就是 592。写死这个数，读者在任何字体 fallback 下看到的行长都一样。

分隔

---

分隔符是三个点，不是整宽横线——横线归结构用。

脚注

正文里引一个脚注¹，页尾会有一栏序号。

本文采用 CC BY-NC-SA 4.0 授权，转载请注明出处。

2026-07-26

建页。

上一篇：无 下一篇：中文排版检查

发现错误？写信到 joey at joeyspace.com。

Footnotes

1. 脚注区离正文 64px，这是纵向节奏的第四档。 ↩