关于中文字体的根本限制
中文字体文件通常 3–30MB,无法通过 CDN 实时加载(用户体验极差)。因此中文排版几乎只能依赖系统字体。好消息是:iOS/macOS 的苹方、Windows 的微软雅黑,在各自平台上都是优秀的字体,用 font-family 声明一个合理的 fallback 链即可覆盖绝大多数用户。
苹方 / PingFang SC
iOS · macOS · 无衬线
6字重
font-family: "PingFang SC", sans-serif;
Ultralight 100
代码的记忆——Git 前世今生 The quick brown fox
Thin 200
代码的记忆——Git 前世今生 The quick brown fox
Light 300
代码的记忆——Git 前世今生 The quick brown fox
Regular 400
代码的记忆——Git 前世今生 The quick brown fox
Medium 500
代码的记忆——Git 前世今生 The quick brown fox
Semibold 600
代码的记忆——Git 前世今生 The quick brown fox
正文示范 16px
1991年,一个芬兰大学生把自己写的操作系统内核发布在了互联网上,附上一句轻描淡写的话:"这只是个爱好项目,不会像GNU那样大或专业。"没有人预料到接下来会发生什么。
微软雅黑 / Microsoft YaHei
Windows · 无衬线
2字重
font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
Regular 400
代码的记忆——Git 前世今生 The quick brown fox
Bold 700
代码的记忆——Git 前世今生 The quick brown fox
正文示范 16px
1991年,一个芬兰大学生把自己写的操作系统内核发布在了互联网上,附上一句轻描淡写的话:"这只是个爱好项目,不会像GNU那样大或专业。"没有人预料到接下来会发生什么。
宋体 / SimSun & 楷体 / KaiTi
Windows 系统 · 衬线
font-family: "SimSun", "宋体", serif; | font-family: "KaiTi", "楷体", serif;
宋体 Regular
代码的记忆——Git 前世今生 软件开发的历史
楷体 Regular
代码的记忆——Git 前世今生 软件开发的历史
使用建议
宋体和楷体屏显效果较差,适合引用块、特殊强调,不建议用于正文大段落。
推荐中文字体 Fallback 链(覆盖 iOS · Android · Windows · macOS)
font-family: "PingFang SC", "苹方", "Noto Sans CJK SC",
"Microsoft YaHei", "微软雅黑",
"WenQuanYi Micro Hei", sans-serif;
Playfair Display
Display · 高对比度 · 适合标题
font-family: 'Playfair Display', serif; | Google Fonts
Regular 400
The Memory of Code — Git
Italic 400i
The Memory of Code — Git
Bold 700
The Memory of Code — Git
Bold Italic 700i
The Memory of Code — Git
正文混排 16px
In 1991, a Finnish student published the kernel of an operating system on the internet, with a casual note: "this is just a hobby, won't be big and professional like GNU."
DM Serif Display
Display · 优雅 · 适合大标题
font-family: 'DM Serif Display', serif;
Regular 400
The Memory of Code
Italic 400i
The Memory of Code
EB Garamond
正文 · 古典 · 书籍感强
font-family: 'EB Garamond', serif;
Regular 400
The Memory of Code — Git History
Italic 400i
The Memory of Code — Git History
Medium 500
The Memory of Code — Git History
正文示范 17px
In 1991, a Finnish student published the kernel of an operating system on the internet. No one expected what would happen next. Developers around the world began sending patches — not through any system or platform, but by email.
Lora
正文 · 适合长文 · 中英混排友好
font-family: 'Lora', serif;
Regular 400
The Memory of Code — Git History
Italic 400i
The Memory of Code — Git History
SemiBold 600
The Memory of Code — Git History
Source Serif 4
正文 · Adobe出品 · 可变字体
font-family: 'Source Serif 4', serif;
Light 300
The Memory of Code — Git History
Regular 400
The Memory of Code — Git History
SemiBold 600
The Memory of Code — Git History
Light Italic 300i
The Memory of Code — Git History
在中文排版中的角色
无衬线英文字体适合用于标签、注释、页眉页脚、小字标注等辅助性文字,与中文主体形成对比层次。正文一般不建议纯英文无衬线搭配中文衬线——视觉上会打架。
DM Mono(无衬线等宽)
标注 · 数据标签 · 清晰
font-family: 'DM Mono', monospace;
Light 300
Vol.01 · 2025 · Git Series · 0x3f8c2d
Regular 400
Vol.01 · 2025 · Git Series · 0x3f8c2d
Medium 500
Vol.01 · 2025 · Git Series · 0x3f8c2d
Space Mono
等宽 · 复古感 · 个性强
font-family: 'Space Mono', monospace;
Regular 400
Vol.01 · Git · SHA-1 · a3f8c2d
Italic 400i
Vol.01 · Git · SHA-1 · a3f8c2d
Bold 700
Vol.01 · Git · SHA-1 · a3f8c2d
为什么 IBM Plex 值得重点对待
IBM Plex 是 IBM 2017年发布的开源字体家族,由 Mike Abbink 主导设计。它分三个子系列:Sans(无衬线)、Serif(衬线)、Mono(等宽),共享同一套设计语言——比例、粗细、曲线完全协调。这意味着你可以在同一个版面里自由混搭三种风格,不会产生冲突。此外,IBM Plex 对数字和标点的处理极为考究,特别适合技术内容排版。全系列通过 Google Fonts 免费加载,这是最好的消息。
IBM Plex Sans
无衬线 · 标题 · 标签 · UI文字
font-family: 'IBM Plex Sans', sans-serif;
Light 300
The Memory of Code — Git 代码的记忆
Light Italic 300i
The Memory of Code — Git 代码的记忆
Regular 400
The Memory of Code — Git 代码的记忆
Regular Italic 400i
The Memory of Code — Git 代码的记忆
Medium 500
The Memory of Code — Git 代码的记忆
Bold 700
The Memory of Code — Git 代码的记忆
IBM Plex Serif
衬线 · 正文 · 引用 · 与中文搭配优秀
font-family: 'IBM Plex Serif', serif;
Light 300
The Memory of Code — Git History
Light Italic 300i
The Memory of Code — Git History
Regular 400
The Memory of Code — Git History
Regular Italic 400i
The Memory of Code — Git History
Medium 500
The Memory of Code — Git History
Bold 700
The Memory of Code — Git History
正文示范 17px
In 1991, a Finnish student published the kernel of an operating system on the internet. No one expected what would happen next. Developers around the world began sending patches — not through any system, but by email.
IBM Plex Mono
等宽 · 代码 · 数字 · 标注
font-family: 'IBM Plex Mono', monospace;
Light 300
git commit -m "init" · SHA: a3f8c2d · Vol.01
Light Italic 300i
git commit -m "init" · SHA: a3f8c2d · Vol.01
Regular 400
git commit -m "init" · SHA: a3f8c2d · Vol.01
Medium 500
git commit -m "init" · SHA: a3f8c2d · Vol.01
Medium Italic 500i
git commit -m "init" · SHA: a3f8c2d · Vol.01
代码块示范
git init
git add .
git commit -m "The beginning of everything"
IBM Plex 三合一搭配示范
编程工具系列 · Vol.01
代码的记忆
Git 前世今生
1991年,一个芬兰大学生把自己写的操作系统内核发布在了互联网上,附上一句轻描淡写的话:"这只是个爱好项目,不会像GNU那样大或专业。"
技术注记 · Technical Note
SHA-1: a3f8c2d1e9b4f67890abcdef · 每个commit的唯一指纹
方案 A · Google Fonts 加载
适合:独立网页 / GitHub Pages
在 <head> 引入 Google Fonts 链接,适用于你的 GitHub Pages 个人网站(miyazawa-ron.github.io)。IBM Plex 全系列、Playfair Display 等均完整可用。
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,300;0,400;0,500;1,400&family=IBM+Plex+Mono:wght@300;400;500&display=swap" rel="stylesheet">
方案 B · 字体子集化 + Base64 内嵌
适合:仅需少量字符的标题字体
如果标题只用英文,可以把字体文件子集化(只保留用到的字符),压缩到几KB,再转成Base64内嵌进HTML。适合处理"Vol.01"、"Git"这类少量固定英文标题。工具:fonttools 的 pyftsubset,或在线工具 Font Squirrel。
方案 C · 图片化标题
适合:需要精确字体的关键标题
在 AI/ID 里用任意字体排好标题,导出为 PNG(透明背景或白底),上传到公众号素材库作为图片使用。这样标题可以用你喜欢的任何字体,正文仍用系统字体。这也是目前最可靠的跨平台特殊字体方案。
方案 D · 中文特殊字体(思源系列)
适合:GitHub Pages + 接受加载时间
思源宋体(Source Han Serif)和思源黑体(Source Han Sans)是Adobe与Google联合出品的开源中文字体,字形优美,但全字集文件超过10MB。解决方案:
① 使用 Google Fonts 的思源系列(Noto Serif SC / Noto Sans SC),CDN按需加载,在独立网页上体验较好,公众号不可靠。
② 公众号完全放弃特殊中文字体,接受苹方/微软雅黑,在版式设计上用结构和留白弥补字体的局限。