/3 min read

中文排版测试

writingtypography

写英文的时候，字体之间的差别很微妙；写中文的时候，差别立刻被放大。同样一个段落，在 Newsreader 下显得克制，在思源宋体下显得沉稳，在系统默认字体下又往往显得呆板。

这篇 post 用来检查这套排版（Fraunces 用于标题、Newsreader 用于正文、JetBrains Mono 用于元数据）在中英混排时的实际效果。中文部分会落在浏览器找到的第一个可用衬线字体上——macOS 通常是 PingFang SC，Windows 上常见的是 Microsoft YaHei。

标题层级

二级标题用来分章节，字号比正文略大，使用 Fraunces 显示字体。中文 fallback 到系统衬线。

三级标题

三级标题更小，用于分小节。

段落与中英混排

中文段落里夹一个英文单词，比如 typography 或者 monospace，再夹一段 inline code，看间距是否舒服。中文标点（，。：；！？）和英文符号（commas, periods）混在一起时，是否需要额外补一个空格？这是一个老问题，多数现代浏览器会自动处理一部分，但效果不总是稳定。

数字也值得测：今天是 2026 年 5 月 10 日，距离这个博客重建过去了大约 两天。汉字与阿拉伯数字之间的间距，在不同字体里差异挺大。

列表

无序列表：

  • 字体组合：Fraunces + Newsreader + JetBrains Mono
  • 配色：奶油色背景 + 深棕正文 + 红棕色 accent
  • 装饰：轻微胶片颗粒 + 段落分隔线

有序列表：

  1. 第一步——挑字体
  2. 第二步——定配色
  3. 第三步——调间距和留白

引用块

排版的目的不是让字看起来漂亮，而是让人读得舒服。

真正讲究的设计师都明白，最好的排版是「读完之后没注意到排版」。

代码

行内 code 嵌在中文里：运行 npm run build 生成静态站点；用 <PostCard /> 渲染单条 post。

代码块：

// 一个简单的 TypeScript 函数
function greet(name: string): string {
  return `你好，${name}！`
}

console.log(greet('世界'))
# Python 也可以混排
def 问候(姓名: str) -> str:
    return f"你好，{姓名}！"

print(问候("世界"))

链接

外部链接：Google Fonts 上能找到 Newsreader 和 JetBrains Mono。看下划线在中文字符下的位置是否合适。

水平分隔线

下面是一条 <hr>，应该渲染成一条带 ✦ 标记的细线：

分隔线之后继续段落。如果一切正常，这条线应该带一个红棕色的 ✦，居中显示。

总结

如果上面的内容看起来都比较协调——

  • 行距足够喘息但不松散
  • 中英混排没有明显打架
  • 引用块和代码块层次清晰
  • 链接和行内代码在段落里不突兀

——那这套排版在中文场景下基本可以接受。哪里看着别扭，记下来回头调。