wait4xandGLM-5.3
0fbb023375
调研收官产物入库：主报告（架构 C''=Astro SSG+gitea 双写作流、 Artalk 评论、分片 webfont、双语预译管线、多端适配规格、 Phase 0-5 实施规划）+ 五份侦察原稿 + 可交互单文件样板 （三路线×明暗×五页型，命令面板/终端/热力图/masonry）。 Co-authored-by: GLM-5.3
238 lines
18 KiB
Markdown
238 lines
18 KiB
Markdown
# 中文排版与阅读体验调研报告（博客重设计 · 侦察任务 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 清单（下述全部为源码原文）：
|
||
|
||
```css
|
||
: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 支持推进中），上线前建议按目标浏览器实测。
|