中文与 CJK 排版测试

为什么需要中文排版测试

中文文章的阅读节奏，和英文文章并不完全相同。汉字通常没有空格作为天然的分词边界，标点符号也有自己的全角宽度与避头尾规则。当一个主题只用英文短句测试时，很多问题不会出现；一旦标题变长、段落变密，或者中英文术语同时出现，字体、行高、字距和容器宽度之间的关系就会变得明显。

静态网站、软件设计与个人博客都需要稳定的文字基础。Hugo 是一个使用 Go 编写的 Static Site Generator，它在构建阶段生成页面，浏览器负责最后的排版。主题不应该假设所有内容都是英文，也不应该因为一段中文没有空格，就让整篇页面出现横向滚动。

中文标题与标点

一篇文章如何保持清楚的层次？

标题不只是放大后的文字，它还承担导航作用。中文标题可以很短，也可以包含完整的问题；无论长度如何，标题与下一段之间都需要有清楚的视觉关系。请注意下面这些标点：中文逗号，中文句号。问号？感叹号！顿号、分号；冒号：以及括号（内容）。

引号、书名号与破折号

中文写作经常同时使用「引号」、 “双引号”、 《书名号》以及破折号——这些符号的形状、间距和基线都值得观察。省略号……应该保持成对出现，连接号与减号也不应该被字体渲染成难以辨认的一条短线。

中英文混排

在真实的技术文章里，语言很少只有一种。我们可能会说：Hugo主题需要兼顾 Hugo Theme 的布局规则；CSS变量需要和 CSS Variables 一起检查；中文English混排与中文 English 带空格混排，看起来相似，却会产生不同的换行位置。

数字也会自然地出现在句子里：这个页面创建于 2026-08-30，构建耗时 14:30:00，示例预算是 $1,234.56，圆周率取 3.1415926。英文单词 overflow-wrap、路径 content/posts/example.md 与中文说明放在一起时，行高和字距仍应保持稳定。

一段较长的中文段落

好的文章页面不需要把每一行都塞满。适当的内容宽度可以让眼睛在行尾停顿，再自然地移动到下一行；足够的行高则能避免相邻行互相干扰。对于中文来说，标点的视觉重量有时比拉丁字母更均匀，因此过大的字距会让段落显得松散，过小的行距又会让多行文字挤在一起。主题需要在桌面屏幕与手机屏幕之间找到一个可持续的比例，而不是只为某一张截图做静态调整。

中文长段落还会暴露一些英文页面不容易遇到的细节。例如，连续的汉字通常可以在字符之间换行，但书名号、括号和引号应尽量与其内容保持合理关系。混入 URL、文件名或产品名称后，浏览器又要面对没有自然断点的拉丁字符。一个可靠的布局策略应该让异常字符串在局部处理，而不是让整个页面被迫变宽。

列表与引用

中文列表同样需要清楚的缩进和项目间距：

• 第一项：描述一条可以立即理解的内容。
• 第二项：包含 inline code 与一个 内部链接。
  • 子项目可以继续说明背景。
  • 另一个子项目保持相同的层级。
• 第三项：用一句简短的话结束列表。

引用可以来自一段访谈，也可以只是文章中的一个重要判断。它应当和正文形成区别，但不应该因为背景颜色或边框太重而抢走全部注意力。

中文代码说明

下面的代码很短，重点是观察中文说明紧邻代码时的间距、字体切换与滚动行为。

# 这是一个用于测试的 Hugo 配置片段
hasCJKLanguage: true
defaultContentLanguage: zh-cn

代码之后的段落继续使用中文，并且包含 English、font-family 和一个 代码展示页面。代码字体可以和正文字体不同，但两者的大小与行高不应该让阅读节奏突然断裂。

一张中文表格

结语：让文字先被看见

排版测试的目的不是追求某一种“完美”的字体，而是确认内容能够在不同设备、不同主题模式和不同语言环境中保持可读。亮色模式下，浅色背景上的灰色文字需要有足够对比度；暗色模式下，纯白文字也不一定比柔和的浅色更舒服。透明面板后面的背景变化，不应该影响读者辨认中文标点与数字。

一套长期维护的主题，应该把中文文章、英文长文、代码、表格和极端字符串放在同一组回归数据里。每次修改 CSS、TOC 或文章布局时，都重新查看这些真实内容，才能知道变化影响了什么。文字最终会比设计稿更诚实：它会告诉我们一个页面到底能不能被读完。