14

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

 1 year ago
source link: https://hsingko.github.io/post/2022/09/21/using-lxgwwenkai-in-my-blog/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

让自己的博客漂亮起来吧

2022-09-21 · 2 分钟 · hsingko

不得不承认的一点是，博客的颜值会在很大程度上影响读者的心情，而颜值往往取决于博客的主题外观。我现在使用的是 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/head.html 中，加入如下代码：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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 进行修改即可。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK