hsingko ▮

在博客上使用霞鹜文楷字体

2022-09-21

不得不承认的一点是，博客的颜值会在很大程度上影响读者的心情，而颜值往往取决于博客的主题外观。我现在使用的是 hugo-papermod 这个免费开源主题，简洁性倒是够了，但问题是看起来还是有种廉价感。以前在折腾其他主题的时候，曾经尝试过使用中文 webfont ，还因此写了一篇关于中文字体压缩的文章。当时的效果确实不错，可惜看久了就腻了，最后还是用回了 google fonts ，因为它是颜值与加载速度之间的平衡点。

而我大约是个喜新厌旧的人，用了大半年的 noto serif 终究还是腻了，以至于都没有写文章的心情。这几个月来一直在 Obsidian 上写一些个人 wiki 性质的笔记，用的字体是开源的霞鹜文楷 ，这个免费的字体比起其他商用的字体也毫不逊色，今天更是发现可以用 CDN 来在博客上进行使用，方法如下。

首先项目地址是这个：https://github.com/chawyehsu/lxgw-wenkai-webfont ，里面提供了三种安装字体的方法，对于静态博客来说，我们只需要关注 CDN 安装这个方法就可以了，为此只需要两步：

  • 在 <head> 标签里加入 <link>
  • 设置 font-family

以 hugo-papermod 主题为例，需要修改两个文件。

在 themes/PaperMod/layouts/partials/extend_head.html 中，加入如下代码：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lxgw-wenkai-lite-webfont@1.1.0/style.css" />

这一步应该对其他 hugo 主题也是通用的。另外，我这里使用的是 lite 版本的字体，这个字体包最小，只包含常用简体字，如果你有需要，也可以按照项目中给出的其他字体。

接着修改 themes/PaperMod/assets/css/core/reset.css 文件，搜索 body{ ，其中的 font-family 中加入霞鹜文楷字体，顺序是放在英文字体之后，其他中文字体之前：

body {
    /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
    font-family: 'PT Serif','LXGW WenKai Lite','Noto Serif SC', serif;
    font-size: 18px;
    line-height: 1.6;
    word-break: break-word;
    background: var(--theme);
}

对于其他主题，你可以直接在主题 css 文件夹下搜索 font-family 进行修改即可。