有一天看到了别人的博客，发现那个字体真好看啊

F12 去看了下随后去搜了搜，发现了是一个开源的字体

https://github.com/lxgw/LxgwWenKai

名字起的也挺好听的：霞鹜文楷

下面介绍一下我的博客修改这个字体的方法

博客说明

Hugo + PaperMod

可参考：Blog All Process

参考

在官方 github 上找到了 cdn：https://github.com/lxgw/LxgwWenKai/issues/24

下面是原话：

关于chawyehsu制作的webfont, 我向cdnjs提了pr, 目前merge了, 国内已有镜像, 有需要的可以使用. https://cdn.staticfile.org/lxgw-wenkai-webfont/1.6.0/style.css https://cdn.staticfile.org/lxgw-wenkai-screen-webfont/1.6.0/style.css 目前只有这两个, 其他的没提交

参考引入

<html>
<head>
 <link rel="stylesheet" href="https://cdn.staticfile.org/lxgw-wenkai-webfont/1.6.0/style.css" />
 <!-- 没有Lite version, 有需要的可以向cdnjs发pr看看能不能通过-->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lxgw-wenkai-lite-webfont@1.1.0/style.css" />
 <!-- 没有TC version, 有需要的可以向cdnjs发pr看看能不能通过-->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lxgw-wenkai-tc-webfont@1.0.0/style.css" />
 <!-- Screen version -->
 <link rel="stylesheet" href="https://cdn.staticfile.org/lxgw-wenkai-screen-webfont/1.6.0/style.css" />
 <style>
   body {
     font-family: "LXGW WenKai", sans-serif;
     /* Lite version */
     font-family: "LXGW WenKai Lite", sans-serif;
     /* TC version */
     font-family: "LXGW WenKai TC", sans-serif;
     /* Screen version */
     font-family: "LXGW WenKai Screen", sans-serif;
   }
 </style>
</head>
<body>
 <!-- blablabla -->
</body>
</html>

使用方式

两个关键文件

themes/PaperMod/layouts/partials/extend_head.html，这个是会插入到 <head></head> 中间的内容

themes/PaperMod/assets/css/extended/blank.css ，这个是可以自定义样式的地方

首先需要引入文件

放在上面那个 html 中完成

<link rel="stylesheet" href="https://cdn.staticfile.org/lxgw-wenkai-screen-webfont/1.6.0/style.css" />

其次就是样式调整

放在上面那个 css 中完成

自己摸索的话，就是去浏览自己的网站，通过开发者模式选中元素去看对应的 css 样式类，然后做替换即可

类似这样：

.post-content {
    font-family: "LXGW WenKai Screen", sans-serif;
}

code {
    font-family: "LXGW WenKai Screen", sans-serif;
}

.post-title {
    font-family: "LXGW WenKai Screen", sans-serif;
}

.logo a {
    font-family: "LXGW WenKai Screen", sans-serif;
}

#menu a {
    font-family: "LXGW WenKai Screen", sans-serif;
}

后来我媳妇儿说直接改基础的就行（她是前端，我不是），有个前端媳妇儿就是好 ~

随后就改成了这样：

body {
    font-family: "LXGW WenKai Screen", sans-serif !important;
}

code {
    font-family: "LXGW WenKai Screen", sans-serif;
}

为什么 code 也单独加了个，是因为加了 body 的之后，发现代码中的还不行，就去找了下加上了

然后就完事儿了

插一个busuanzi

网站信息统计，大部分用的应该都是卜算子吧

这个自己没有怎么研究，跟着别人的来就有了，目前也不打算过多研究，能用就行，所以直接插在这儿了

官网：http://ibruce.info/、https://github.com/bruce-sha

参考博客：https://blog.kanikig.xyz/hugo-busuanzi/

这次真完事儿了

Bye ~