这是一篇临时测试文章，用来观察 正文衬线、UI 无衬线、代码等宽 三套字体在不同内容形态下的视觉效果。
一、正文段落测试
这是一段中文正文，用来测试 Noto Serif SC 一类衬线字体在连续阅读场景中的表现。理想状态下，你应该会感觉字面更稳、段落更有呼吸感、阅读节奏比默认无衬线更像“文章”而不是“界面说明”。
如果你把这段文字快速扫一遍，再慢慢读一遍，应该能明显感受到：在中文长文里，衬线字体会更有书卷气，尤其适合记录阅读、观影、日常与思考类内容。
再补一段稍长一点的内容，观察多个标点混排时的状态：比如这些符号本体 ，、；：？！“”‘’（）《》——……，以及一段真实句子“我们先写下来，再慢慢改；先求成立，再求漂亮。” 在字体切换之后，是否依然保持了均衡、克制、耐读的气质。
二、中英混排测试
今天读到一句很喜欢的话：Design is not decoration; design is decision.
当一段文字同时出现中文、English words、缩写词如 PKM / RSS / API / UI / UX，以及一些技术名词如 Hugo、PaperMod、JetBrains Mono、Noto Serif SC 时，理想状态是：
- 中文依然是主体
- 英文不会显得突兀
- 数字与标点的节奏尽量自然
比如下面这段：
我最近在用 Hugo 重构个人博客，希望它既能承载 long-form writing，也能容纳 tools / books / movies / notes 这类更偏索引型的信息。最终目标不是做成一个“酷炫主页”，而是一个能长期生长的 digital garden。
三、标题层级测试
三级标题：适合段落切分
标题应该比正文更有识别度，但又不要太吵。这里主要观察 display 字体是否带来一点“编辑感”，同时不至于破坏整体克制感。
四级标题：更细的结构层
如果标题太轻，会和正文混在一起；如果太重，又会抢正文风头。所以这里主要看层级是否清晰。
五级标题：边界场景
通常不会频繁使用，但测试一下也有必要。
四、列表与任务列表
无序列表
- 一台真正顺手的电脑，会让你更愿意写东西。
- 一把好椅子，可能比一把好键盘更重要。
- 一盏舒服的灯，会影响你是否愿意在晚上继续读书。
- 一种合适的字体，会影响你愿不愿意把一篇文章读完。
有序列表
- 先明确博客的内容结构。
- 再决定排版气质。
- 然后选择正文字体、UI 字体、代码字体。
- 最后再微调标题、留白、颜色与细节。
任务列表
- 设置正文衬线字体
- 设置 UI 无衬线字体
- 设置代码等宽字体
- 继续优化卡片页信息层级
- 增加“此刻 / 最近”模块
五、引用与强调
真正好的博客设计，不会让你注意到“设计”本身； 它只会让你更愿意停留、阅读、回想，并在某一天再次回来。
你可以观察这里的 粗体、斜体、删除线、行内代码、以及 行内链接 在同一段中的视觉关系是否协调。
另外再来一段稍长的引用：
写博客最迷人的地方，也许并不在“被多少人看见”，而在于它逼着你整理自己的经验、判断和趣味。长久以后，博客会慢慢变成一个人的思考切片、时间索引和精神侧写。
六、代码测试
行内代码
例如：执行 hugo server 启动本地预览，或者用 rg "font-family" assets css themes 搜索字体定义。
代码块：Shell
hugo server --bind 127.0.0.1 --port 1313
rg "font-family|--font-" assets themes layouts
git status --short
代码块：CSS
:root {
--font-ui: "PingFang SC", "Noto Sans SC", "Segoe UI", sans-serif;
--font-body: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
--font-mono: "JetBrains Mono", "SFMono-Regular", monospace;
}
.post-content {
font-family: var(--font-body);
line-height: 1.92;
letter-spacing: 0.01em;
}
代码块：JavaScript
function renderReadingMood(article) {
const hasChinese = /[\u4e00-\u9fa5]/.test(article.text);
return {
tone: hasChinese ? 'editorial' : 'minimal',
font: hasChinese ? 'Noto Serif SC' : 'system-ui',
};
}
七、表格测试
| 项目 | 推荐字体 | 作用 | 备注 |
|---|---|---|---|
| 正文 | Noto Serif SC | 长文阅读 | 更有文章感 |
| UI | PingFang SC / Noto Sans SC | 导航、标签、meta | 更清爽利落 |
| 代码 | JetBrains Mono | 代码块、行内代码 | 结构清晰 |
| 点缀 | LXGW WenKai | motto、引言、小标题 | 少量使用更合适 |
八、定义列表与术语说明
- 术语
- 这里用来测试术语和解释类内容的排版表现。
- Digital Garden
- 指一种持续生长、互相链接、可不断迭代的个人知识空间。
- Editorial Tone
- 指更接近纸媒、书籍、杂志排版的写作气质。
九、图片与图注测试
图 1：这是一张占位图，用来测试图片与说明文字之间的间距、字号和字体关系。
十、分隔线测试
上面是正文内容，下面是更短、更碎片化的内容。
十一、短句与卡片式文案测试
适合放在 好物 / 工具 / 阅读 / 观影 这类栏目里的短句文案：
- 用了很久，依然喜欢。
- 不一定最强，但是真的顺手。
- 不是必需品，却会提高生活密度。
- 值得反复重看的一部电影。
- 一本读完之后会想安静一会儿的书。
十二、数字、日期与节奏测试
- 发布日期：2026-03-10
- 阅读时间：12 min read
- 版本号：v1.2.3
- 分辨率：2560 × 1440
- 预算区间：¥199 - ¥599
- 常见比例：1:1、4:3、16:9
观察数字在正文、列表和 UI 信息中的宽度是否舒服，是否有跳动感。
十三、脚注测试
有些内容适合用脚注补充，而不是打断正文阅读节奏。这里放一个脚注示例1，再放一个更长一点的脚注示例2。
十四、结尾段落
如果这一页看下来，你觉得：
- 正文更像在“读文章”
- 导航、标签、日期更像“界面信息”
- 代码更像“代码”
那么这次“正文与 UI 字体分家”的方向就是对的。