作者：JiangYM（xxx@example.com）

先说结论：折腾了三天，最后还是用回了系统默认字体栈。

真是浪费时间，但又觉得不亏——这种矛盾的心情大概就是折腾型技术宅的宿命吧。

起因

上周末发完文章之后，随手打开博客看了一眼，突然觉得正文的字体越看越不顺眼。Reimu 主题默认用的是一套日文字体栈，英文和标点看着还行，但中文的显示效果怎么说呢——就是那种说不上丑但总觉得哪里不太对的感觉。可能是我自己看多了，审美疲劳。

于是乎，一个本来只是打算「花十分钟换个字体」的小项目，变成了持续三天的 CSS 调优马拉松。

尝试路线

第一天：Google Fonts + Noto Sans SC

第一反应是上 Google Fonts 找「最好看的中文字体」。选了 Noto Sans SC，毕竟 Google 出品、字重多、有开源许可，理论上是最稳妥的选择。

步骤很简单：在主题的 head.html 里加一行 Google Fonts 的 link，然后在 custom CSS 里覆盖 body 的 font-family。

结果加载完一刷新页面，好家伙，首页白屏了大概一秒多才渲染出来——字体文件的加载阻塞了首屏渲染。虽然我服务器在美西，但 Google Fonts 的 CDN 在国内加载速度很玄学，快的时候还行，慢的时候能卡好几秒。

这不行，博客本来就没什么流量，首屏再慢，仅有的几个访客直接跑了。

于是研究了一下 font-display: swap 和 preconnect。加上之后白屏问题解决了，但出现了 FOUT（Flash of Unstyled Text）——字体加载前先显示 fallback 字体，加载完突然闪一下变成 Noto Sans。虽然只有几十毫秒的闪烁，但我这种强迫症看着贼难受。

第二天：自托管字体

既然 CDN 有问题，那就自己托管。从 Google Fonts 下载了 Noto Sans SC 的几个字重（300、400、700），用 woff2 格式放到 static/fonts/ 目录下。

本文2026-09-14首发于JiangYM's Blog，最后修改于2026-09-14