字体参考手册

网页 · 微信公众号排版 · 2025 · 与 Claude 协作使用

01 中文系统字体 系统字体 · 无需加载
关于中文字体的根本限制 中文字体文件通常 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;
02 英文衬线字体 Google Fonts CDN · 需网络
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
03 英文无衬线字体 Google Fonts CDN
在中文排版中的角色 无衬线英文字体适合用于标签、注释、页眉页脚、小字标注等辅助性文字,与中文主体形成对比层次。正文一般不建议纯英文无衬线搭配中文衬线——视觉上会打架。
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
04 IBM Plex 系列 · 重点推荐 Google Fonts · 完整可用
为什么 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的唯一指纹

05 字号规范 · 微信公众号适用
微信公众号字号的基本约束 公众号文章在手机上阅读,屏幕宽度约 375–430px。系统会对字号进行一定的缩放,但基础规律是:正文低于 14px 会明显影响可读性,低于 12px 几乎不可读。以下规范以手机阅读体验为准。
用途 CSS 字号 示意 字重建议
大标题 / Hero 2rem – 2.4rem
32–38px
代码的记忆 400 / 300
章节标题 H2 1.3rem – 1.5rem
21–24px
Git 的诞生 400 / 500
小节标题 H3 1.05rem – 1.1rem
17–18px
Linus 的设计目标 500 / 600
正文 Body 1rem – 1.06rem
16–17px
1991年,一个芬兰大学生把自己写的操作系统内核发布在了互联网上。 400
引用块 / 注记 0.95rem
15px
BitKeeper让他第一次真正体会到分布式的好处。 400 italic
标签 / 元信息 0.68rem – 0.72rem
11–12px
VOL.01 · 编程工具系列 400 / 500 Mono
代码块 0.82rem – 0.88rem
13–14px
git commit -m "init" 400 Mono
脚注 / 版权 0.65rem
10–11px
© 2025 · 编程工具系列 · 转载请注明出处 300 / 400
06 微信公众号 HTML 适配说明 有限制 · 需测试
功能是否支持说明
内联 CSS(style="") ✓ 支持 最可靠的方式,公众号会过滤 <style> 标签
<style> 标签 △ 部分 通过壹伴/秀米等工具发送时通常会被剥离,需内联化
Google Fonts @import ✗ 不可靠 外部字体CDN在公众号WebView中经常被拦截
系统字体 ✓ 可靠 苹方/微软雅黑/系统默认,最稳定
外链图片 ✗ 禁止 必须上传到公众号素材库,用素材URL
Base64 内嵌图片 △ 有限 小图标可以,大图会导致文章体积超限
CSS 动画 / JS ✗ 无效 公众号图文消息中 JS 和 CSS animation 均不生效
SVG 内联 △ 部分 简单静态SVG有时可以,复杂SVG常被过滤
Flexbox / Grid ✓ 支持 现代CSS布局属性基本支持,需内联写
公众号排版的核心策略 由于外部字体不可靠,我们的方案是:
· 英文标题/标签用 IBM Plex 系列(在能加载的环境下),fallback 到系统等宽字体
· 中文正文始终用系统字体(苹方 → 微软雅黑 → 系统默认)
· 所有样式用 style="" 内联,不依赖外部CSS文件
· 图片全部上传到公众号素材库后替换URL
· 用纯色块、边框、字重、字号的层次代替图片装饰
07 特殊字体需求解决方案
方案 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按需加载,在独立网页上体验较好,公众号不可靠。

公众号完全放弃特殊中文字体,接受苹方/微软雅黑,在版式设计上用结构和留白弥补字体的局限。