折腾 | 博客字体变更记

本文解决的是博客中文阅读体验不够统一的问题：通过更换正文字体、调整背景色、选中文本、对齐方式和标题样式，让 Hugo 博客在长文阅读时更沉静、更清晰，也更符合当前的内容气质。

适用场景

如果博客以中文长文为主，并且希望通过较小的 CSS 改动提升阅读质感，可以参考这次折腾。它尤其适合已经有稳定主题、但觉得默认字体和标题层级略显松散的 Hugo 站点。

核心步骤

今天更换了新的博客字体 ——「京华老宋体」，用的是中文网字计划提供的 CDN 分发，引入十分方便。配合字体也对博客的相关方面进行了修缮，使调性更加统一，处女座强迫症哈哈哈。

这里罗列一下具体做的改变：

• 字体改为「京华老宋体」，博客的文字看起来既有美感韵律又不缺辨识区分度，还莫名添了几分思考的力量，读起来很有感觉！
• 默认白色背景下字体显得发虚有点儿累眼，于是做旧了博客主体背景色，调性立马出来了，整体看下来更像是一方用文字记录想法的小天地了，给人的感觉是沉静、稳重，我很喜欢😊。
• 还把选中文字的显示效果也改了，不同于之前的淡蓝底让配色显得嘈杂，黑底白字更显简洁有力！
• 文本对齐方式改成两端对齐，这样子即使是大段文字看起来也更加整洁了，不会给人参差错落的视觉印象。
• 标题格式方面，仅保留二级标题的「#」前缀，并将前缀向左平移不占用文字区域空间，使文字区域从标题到内容的缩进保持一致。

最终效果

整体效果是文字区域更像一个安静的阅读容器：字体有辨识度，背景和选中态降低了视觉噪音，标题缩进也更稳定。谈到标题，为了避免滥用标题以及保持文章结构的简洁性，之后写文章也打算尽量保持一篇文章的主标题作为一级标题，最多用到三级标题。

小结

最终方案选择了外部中文字体 CDN 加少量 CSS 微调，优点是改动成本低、视觉收益明显；取舍是需要接受字体资源对外部服务的依赖。后续可优化的方向，是继续梳理正文、代码块、引用块等细节样式，让中文排版规则在更多内容类型里保持一致。

参考资料

• 京华老宋体
• 中文网字计划

（2023-11-30@广州）