blog/docs/research/03-中文排版与阅读体验.md

中文排版与阅读体验调研报告（博客重设计 · 侦察任务 3）

调研员：@agent-08671f ｜ 日期：2026-10-24 对象：中文文学书评长文 + Linux 技术文（含代码块）的博客重设计 方法：直连抓取各站 HTML + CSS 源码并逐条提取排版参数（非渲染截图）；crawl4ai 容器辅助渲染；权威排版文献取 W3C《中文排版需求》(clreq) 与 sparanoid《中文文案排版指北》原文。

---

0. 数据来源与可信度说明

来源	状态	说明
howiehz.top	✅ 实抓	首页 + 文章页 + 8 个主题 CSS 文件逐条分析
kaix.in	✅ 实抓	首页 + 文章页 + 全站单文件 CSS
wangyurui.com（太隐）	✅ 实抓	文章页 + Typlog UI css + snow.css 主题文件
cbc688.com（CRIVU）	✅ 实抓	typography.css + style.css（自研 academic 主题）
innei.ren（静かな森）	⚠️ 半实抓	线上是 JS SPA（首屏为歌词开屏页），curl 拿不到正文；排版参数改从其开源主题仓库 Innei/Shiro（main 分支源码文件）取证，报告中已标注
W3C clreq	✅ 实抓	w3c.github.io/clreq（570KB 双语原文，摘录关键条目）
中文文案排版指北	✅ 实抓	sparanoid/chinese-copywriting-guidelines @ master README.zh-Hans.md
候选站发现渠道	⚠️ 变通	DuckDuckGo / Bing / Google 直连与经 crawl4ai 渲染均未返回有效搜索结果（反爬）；改用 GitHub「中文独立博客列表」(timqian/chinese-independent-blogs，实抓 156KB) 按 读书/文学/书评/随笔 标签人工筛选

抓取失败如实记录：鵝庵筆記 (white-ceiling.bearblog.dev) 返回 404；所谓空想 (alxh.page) 返回 403。

---

1. 对照组：howiehz.top（higan 主题作者站）

平台：Halo + 自研 howiehz-higan 主题（CSS 变量 + Tailwind 工具类构建，产物经 lightningcss 处理）。

实测参数（均摘自主题 CSS 原文）：

维度	值	出处
正文字号	--text: 1rem（16px），另有 0.875/0.9375rem 辅助档	components-text-size-normal
正文行高	line-height: 1.725（全局 body）	global-G8hHJbZv.css
版心	.max-width: 100% → 48rem → 56rem → 64rem（1024px） 随断点放大	global-G8hHJbZv.css
标题字阶	h1 1.75rem / h2 1.5rem / h3 1.375rem / h4 1.25rem；h1 letter-spacing: .01em	text-size-normal + global
字体栈	--higan-font-family: "Meslo LG S", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif	global-G8hHJbZv.css
中文字体	完全没有声明——Meslo LG S 的 @font-face 仅按 unicode-range 覆盖拉丁字母与符号分片，汉字全部落到系统默认（PingFang/微软雅黑），黑体渲染	@font-face 系列
配色（light）	bg #fafafa、正文 #333、primary #6cf（青）、accent #c5b6ff（浅紫）	theme-light-blue
配色（dark）	bg #212326、正文 #d5d7d8，light/dark/auto 三态 + 多套主题色	theme-dark-blue
引文	blockquote：整段加粗 + secondary 色 + quotes:"“" "”"；出处行 cite 前缀 "—"	article css
段落处理	无 text-indent、无 justify、正文字距 0	全局检索确认

阅读体验评价：工程师的务实配置——等宽字体作身份标识、代码友好、暗色体系完整、60fps 级特效克制（其站内《中文博客倡议》还提出对比度至少 WCAG AA、禁自动播放等社区规范）。但放到「中文长文阅读」标尺下有四处硬伤：

1. 中文零字体设计：字形气质完全交给操作系统抽奖（macOS 苹方 / Windows 微软雅黑 / Linux 文泉驿）；
2. 行长失控：64rem=1024px 版心 × 16px 字号 → 桌面每行约 60–64 个汉字，远超中文舒适区（约 35–45 字），扫读时易串行；
3. 16px + 1.725 行高对持续阅读偏小偏密（该行高比率本身够宽裕，但字号拖了后腿）；
4. 引文整段加粗、无书摘层级设计，与文学内容气质不符。

对本次重设计的启示：用户「不喜欢 higan」与实测数据吻合——问题不在工程实现，而在它根本不是为中文长文设计的。重设计应把「中文正文字号—行高—行长」三角作为第一决策，而非后置微调。

---

2. 标杆站 A：KAIX.IN（读书 · 咖啡 · 随笔）

老牌阅读向个人博客，五站中「书页感」最强。

维度	实测值
纸感配色	页面底 #F6F5F3（米白纸色），正文衬底 #fff，链接/引文条 #090 墨绿
正文字体	衬线栈：Georgia, "Nimbus Roman No9 L", "Songti SC", STSong, "Noto Serif CJK SC", "AR PL New Sung", …, NSimSun, SimSun, serif——macOS 宋体-简、Linux 思源宋、Windows 回退宋体
字号	html { font-size: 16px }，大屏断点提升为 18px（rem 基准整体放大，全站等比）
行高	正文 1.8
行长	版心 max-width: 40.5rem（648px ≈ 36 汉字，教科书级 measure）
对齐	text-align: justify（两端对齐，配 overflow-wrap 防止空隙拉爆）
引文	border-left: 2px solid #090 + padding-left: 1.25rem，衬线延续
暗色模式	无（prefers-color-scheme 检索为零）——纸感定位，明确放弃暗色

评价：把「衬线 + 米白纸底 + 两端对齐 + 36 字窄版心」四个变量做满，是中文读书博客的经典解法。代价是完全没有暗色模式、视觉变化少。适合作为书评正文的气质基准，暗色诉求则要从别处补。

---

3. 标杆站 B：太隐 wangyurui.com（随笔 · Typlog 托管 snow 主题）

维度	实测值
正文	.e-content { font-size: 18px; line-height: 1.62; }（body 18px/1.42）
行长	.e-content { max-width: 760px; padding-inline: 18px }（≈ 42 汉字）
字体栈	var(--en-sans), var(--cjk-sans), sans-serif 中西文分离变量设计；cjk 栈 = "PingFang SC","Hiragino Sans GB","Droid Sans Fallback","Microsoft YaHei"（typlog.css）
主色	--primary: #b91903（深红），只用于边框/导航点缀
引文	blockquote { border-left: 4px solid 主色; padding: 0 1em; color: #000000ad }；主题另备装饰款：62px 巨型 “ 低透明度水印 + .96em 字号（适合金句）
暗色模式	无自动暗色

评价：现代简洁黑体派。「18px / 1.62 / 760px」是舒服的默认三角；深红主色克制点缀；中西文用双变量分治的思路值得抄（英文 sans 与中文黑体各自的字重气质更好）。缺点：无暗色、无阅读增强功能。

---

4. 标杆站 C：CRIVU cbc688.com（阅读 · 小说 · 京剧 · 自研 academic 主题）⭐

五站中中文长文排版体系完成度最高，其 typography.css 就是一份可直接抄的 token 清单（下述全部为源码原文）：

:root {
  --font-serif: "Iowan Old Style", "Songti TC", "Songti SC", "STSong",
      "Noto Serif CJK TC", "Noto Serif CJK SC", "PMingLiU", "SimSun", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
      "PingFang TC", "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;

  --type-body: 16px;             /* 列表/UI 正文 */
  --type-body-reading: 20px;     /* ★ 文章阅读模式正文 */
  --leading-body: 1.7;
  --leading-reading: 1.75;       /* ★ 阅读模式行高 */
  --type-article-title: 27px;  --type-page-title: 32px;  --type-section: 24px;
  --leading-heading: 1.3;        /* 标题行高 */
  --tracking-title: 0;           /* 中文标题字距 0 */
}
:root:lang(en) { --tracking-title: -.03em; }        /* 英文才上负字距 */
.article-reading:lang(en) { max-width: 65ch; }      /* 英文按 ch，中文按 px */
.article-page:has(> .article-reading) { --measure: 800px; }   /* 版心硬上限 */

维度	值
纸墨配色	--paper: #fff / --paper-2: #f1f1ef / --ink: #171716 / 正文 --text: #2c2b28 / 弱化 --muted: #77736b / 墨线 --line: rgba(23,23,22,.14)；标题 #285a80、链接 #0066cc
暗色	--paper: #191d23（蓝黑）/ --ink: #f5f5f7，配 color-scheme 声明
阅读模式	移动端正文降到 18px、.article-reading 页面 19px（按容器动态调阶）
细节	标题 text-wrap: balance；文章 deck（导语）15px muted；.article-meta 11px；有 reading-dock 阅读控制面板（字号/目录）
引文	学术极简款：padding-left: 1.35em; color: var(--muted); border-left: 1px solid var(--line-strong)，字号行高与正文一致

评价：「纸墨」隐喻贯穿全部 token；20px/1.75/800px 阅读模式 + 中英文字距分治 + 容器感知字阶，三个设计决策都可直接移植。开源自研主题也证明这类体系在静态站完全可落地。

---

5. 标杆站 D：静かな森 innei.ren（Shiro 主题 · 开源）⚠️ 参数取自源码仓库

线上为 React SPA（首屏歌词开屏），curl 拿不到渲染后正文；以下取自 Innei/Shiro main 分支源码（apps/web/src/styles/）。

维度	实测值（源码原文）
sans 栈	--font-sans: var(--app-font-sans), system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", sans-serif
serif 栈	--font-serif: "Noto Serif CJK SC", "Noto Serif SC", var(--app-font-serif), "Source Han Serif SC", source-han-serif-sc, SongTi SC, SimSun, …（思源宋体全平台名都进了栈，供正文切换）
自托管 webfont	仅代码字体：Operator Mono SSml Nerd（jsDelivr）、JetBrains Mono/Fira Code（Google Fonts）——中文一律不上 webfont
暗色	[data-theme='dark'] { --color-root-bg: rgb(28,28,30) }（iOS 系统灰，非纯黑）；::selection 用 oklch(from accent l c h / 0.3) 半透明；边框 #3f3f46
代码高亮	Shiki 双主题变量：html[data-theme='dark'] .shiki span { color: var(--shiki-dark) }——一套标记两种主题，暗色无需重新解析
其他细节	noise 纹理层（暗色下透明度 0.04→0.01）、print.css、主题切换 view-transition 动画

评价：工程化现代派范本。值得抄的不是排版数值（黑体通用型），而是暗色模式的三件套做法：系统灰底色、半透明 selection、Shiki 双主题变量——对「技术文含大量代码块」的本博客尤其对症。

---

6. 中文网络排版最佳实践清单（可直接落地）

来源：W3C clreq 原文 + 中文文案排版指北原文 + 上文五站实测交叉验证。

6.1 字体栈

• 行业现实：五个站无一给中文加载 webfont，全部系统字体栈（性能优先，中文字体动辄 MB 级）。
• 书评正文推荐衬线栈（kaix.in × CRIVU 实测组合）： Georgia, "Iowan Old Style", "Songti SC", STSong, "Noto Serif CJK SC", "Source Han Serif SC", SimSun, serif ⚠️ 把 Noto Serif CJK SC / Source Han Serif SC 排在 SimSun 前面——Windows 老宋体（中易宋体）小字号点阵发虚，有思源宋就用思源宋（CRIVU 做法；kaix.in 没这么做是其短板）。
• UI / 技术文 sans 栈：system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif。
• 代码块：ui-monospace, "JetBrains Mono", Consolas, "Courier New", monospace；等宽 webfont 只需拉丁/符号子集（higan 的 unicode-range 分片、Shiro 只托管代码字体，都是这个思路）。
• 思源宋体/黑体 webfont 使用场景：只有当「跨平台一致的衬线正文」是硬需求时才上，且必须子集化（unicode-range 分片或 cn-font-split）+ font-display: swap；折中方案是仅标题/金句用 webfont，正文系统回退。书评站若接受「不同系统宋体略有差异」，纯系统栈是最稳的。

6.2 字号 · 行高 · 行长（核心三角）

参数	推荐值	实测依据
正文字号	18–20px（阅读模式 20px；移动端 18px）	CRIVU 20/18、太隐 18、kaix 18；16px 仅 UI 正文（higan 反例）
正文行高	1.75–1.8（下限 1.7）	CRIVU 1.75、kaix 1.8、太隐 1.62、higan 1.725
行长（版心）	640–760px ≈ 35–42 汉字；硬上限 800px；英文另设 65ch	kaix 648px/36 字、太隐 760px/42 字、CRIVU 800px 上限
标题行高	1.3，并 text-wrap: balance	CRIVU
标题字阶	文章题 26–27px / 章节 24px / h3 20px（约 1.15–1.35 倍率，中文标题不需要大跳阶）	CRIVU 27/24/20
字距	中文正文与标题 0（最多 0.01em）；英文标题才用 -0.03em	CRIVU :lang(en) 分治、higan h1 .01em
对齐	正文 justify 可选（需配 overflow-wrap: break-word）；不用 break-all（会破坏避头尾）	kaix 实用案例
段落	网文惯例 = 无首行缩进 + 段间距 1em 内；首行缩进 2em 仅适合纯文学章节体，二选一不混用	五站共性（全部用段间距）

6.3 中西文混排间距

• clreq 原文规则：汉字与西文字母/阿拉伯数字之间，空隙不超过四分之一个汉字宽；西文出现在行首行尾时则不加。
• 内容层（现在就做）：中英文、中文与数字之间敲真实半角空格；全角标点与其他字符之间不加空格；数字用半角；「示例：在 LeanCloud 上花 5000 元买 10 Gbps」——sparanoid《中文文案排版指北》全部为这类可执行条目。
• CSS 层（渐进增强）：新属性 text-autospace / text-spacing（Chromium 已在推进）可自动补 ¼em 间隙，写进样式做渐进增强即可，未支持的浏览器不受伤。
• 结构层：中西文各用独立字体变量（太隐 --en-sans/--cjk-sans、Shiro --font-sans/--font-serif 均为西文在前、中文跟随的栈序——西文字形自己出，汉字自动落到中文字体）。

6.4 标点处理

• 行尾点号悬挂：不必做。clreq 原文：「绝大多数的中文出版物没有悬挂行尾点号的惯例」，还可能导致前行字距不一——过去 CSS 圈流行的 hanging-punctuation 技巧在中文语境属于过度设计。
• 避头尾（行首行尾禁则）：必须保。浏览器默认换行规则已处理（，。》不能出头等），危险动作是 word-break: break-all——技术文正文禁用，代码块内才允许。
• 引号：横排用弯引号 "" ''（大陆规范；clreq 确认直排才用直角引号「」）。书评站内容规范：作品名用《》，篇名/章节可用〈〉。

6.5 暗色模式排版调校

• 不用纯黑/纯白：三站实测全是系统灰系——底 #212326 / rgb(28,28,30) / #191d23，字 #d5d7d8–#f5f5f7。目标对比度约 10–13:1（AA 要 4.5:1，纯黑白 21:1 刺眼），CRIVU 的蓝黑 #191d23 最有纸墨延续感。
• 别忘了 color-scheme: dark 声明（原生表单控件、滚动条跟随）——CRIVU 有、多数站漏。
• 正文不必加粗补偿；衬线体暗色下发虚优先调字号而非字重。
• 代码块：Shiki 双主题变量（--shiki-dark，Shiro 做法）或 highlight.js 双样式表，一篇页面两套配色，暗色切换零重排。
• 图片：暗色下降低亮度/提高透明度，或像 higan 那样准备 div.light / div.dark 双份图由主题态切换（其 CSS 原文方案）。
• ::selection 用 accent 色加 alpha（Shiro: oklch 30% 透明度），避免刺眼实心块。

6.6 引文 / 书摘样式（书评站的重点组件）

四种实测模式，按气质选：

模式	样式	适合	出处
A 学术极简	1px 细墨线左边框 + muted 色，字号行高与正文一致	长段原文引用、多段书摘	CRIVU
B 现代强调	4px 主色左边框 + 主色淡化文字（60–68% 黑）	中短引用	Typlog snow
C 传统书卷	2px 彩色（墨绿等）左边框 + 1.25rem 缩进，衬线延续	常规书摘	kaix.in
D 装饰金句	62px 巨型 “ 水印（低透明度）+ 0.96em 字号 + 2.2em 左缩进	每篇一句的「金句卡」	Typlog snow

• 反例（higan 现状）：blockquote 整段加粗——长书摘可读性差，重设计应弃用加粗。
• 出处行：小一号（0.875rem）+ muted 色 + "—" 或 "——" 前缀 + 作品名《》（higan 的 cite 方案可用，去掉加粗即可）。
• 书评特供：给「原文摘录」与「我的评论」做视觉分层（如引文无底色 + 评论带 --paper-2 底色），CRIVU 的 --line 墨线体系足够搭出这种层级。

---

7. 给本博客（书评长文 + Linux 技术文）的落地参数建议

综合以上，一套可直接开工的组合：

正文（书评/散文）：     20px / line-height 1.75 / max-width 720px（≈36 字）
                        衬线栈（6.1 推荐栈，Noto Serif CJK SC 前置于 SimSun）
技术文正文：            19px / 1.7 / 同版心；内联 code 用等宽 0.875em
代码块：                16px（0.8em）/ 1.6 / overflow-x: auto / 禁 break-all
                        等宽栈 + Shiki 双主题变量（暗色免重排）
段落：                  无缩进，段间距 0.9em；标题 text-wrap: balance
标题：                  文章题 27px / 章节 22px / h3 19px / 行高 1.3 / 中文零字距
混排：                  中英文间手敲空格（写作规范）+ text-autospace 渐进增强
暗色：                  底 #191d23 系蓝黑 / 字 #f0f0ef 系 / color-scheme: dark
                        代码双主题、图片降亮度、selection 半透明
引文：                  长书摘 = 模式 A；金句 = 模式 D；出处行 0.875rem muted
阅读增强（可选）：      参照 CRIVU：字号切换 dock + 目录面板 + 阅读进度

优先级排序：① 正文字号/行长（20px/720px，直接解决 higan 最大痛点）② 衬线正文栈 ③ 引文组件重做 ④ 暗色按 6.5 调校 ⑤ 阅读增强锦上添花。

---

8. 残留风险与未竟事项

1. 搜索引擎（DDG/Bing/Google，直连+渲染两路）均未返回有效结果，「标杆站发现」靠 GitHub 中文独立博客列表人工筛选，可能错过更优样本；列出的 4 站 + 对照组均为真实抓取。
2. 所有分析基于静态源码，未做浏览器渲染截图；「每行字数」由 px 与字号换算估算。
3. innei.ren 的行高/字号未取到线上实测（SPA 渲染失败），其报告数值仅为字体栈/配色等源码级事实。
4. text-autospace 的浏览器落地进度未逐一验证（Chromium 支持推进中），上线前建议按目标浏览器实测。