安知鱼主题更改字体

求助

最近网站换成了自建Umami统计访客信息，但是为啥还会跳转到不良网站啊~

复现方式：

  1. 使用浏览器，百度搜索 Peter267；
  2. 进入网站，则可能会跳转到赌博网站。

如果您知道原因，欢迎使用邮箱联系wujingbo12@qq.com，我将感激不尽！

正文

不知道各位有没注意到，本站在上个月将字体换成了霞鹜文楷屏幕阅读版，个人感觉非常漂亮。

本篇文章，我来讲解安知鱼主题更改字体的两个方法。当然，如果你不是安知鱼主题但拥有选择网站字体和Inject功能，那么也能使用本教程。

本文全部以LXGW WenKai Screen（霞鹜文楷屏幕阅读版）为例进行演示，请替换成自己需要的字体！

方案一

此方案适合后缀为.ttf/.otf/.woff/woff2 等没有分包的字体文件。

我更加推荐方案二。

创建CSS文件

在博客的source/static目录（/static/目录你可以换成其他的，但必须是/source/目录下）下新建一个font.css文件，在文件中写入下方内容。

1
2
3
4
5
6
7
@font-face{
  font-family: 'LXGW WenKai Screen'; 
  <!-- 其中LXGW WenKai Screen是引入的字体的名称，可以自定义 -->
  font-display: swap;
  src: url('/ttf/LXGWWenKaiScreen.ttf') format("truetype");
  <!-- url中填写自己的字体地址，我使用的是本地文件夹所以用的是相对路径，如果是外部引用的话在其中写入链接地址就好了 -->
}

引入CSS文件

在 themes\anzhiyu 中找到_config.yml文件，找到下列设置项。

1
2
3
4
5
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:

在head下引入CSS文件。

1
2
3
4
inject:
  head:
    # 字体
    - <link rel="stylesheet" href="/static/font.css" media="defer" onload="this.media='all'">

注意：将/static/font.css换成自己实际的地址。

更改字体

在在 themes\anzhiyu 中找到_config.yml文件的Global font settings。

1
2
3
4
5
6
7
8
9
10
11
12
13
# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
  global-font-size: 16px
  code-font-size:
  font-family: 
  code-font-family: consolas, Menlo, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif

# Font settings for the site title and site subtitle
# 左上角网站名字 主页居中网站名字
blog_title_font:
  font_link:
  font-family:

将两个font-family都改成'LXGW WenKai Screen'。

1
2
3
4
5
6
7
8
9
10
11
12
13
# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
  global-font-size: 16px
  code-font-size:
  font-family: 'LXGW WenKai Screen'
  code-font-family: consolas, Menlo, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif

# Font settings for the site title and site subtitle
# 左上角网站名字 主页居中网站名字
blog_title_font:
  font_link:
  font-family: 'LXGW WenKai Screen'

'LXGW WenKai Screen'要改成你在font.css中设置的字体名称。

字体的修改已经全部完成，hexo三连后即可看到效果。

image-20250725114333221

方案二

本方案适合字体文件后缀为.css的分包后的字体文件。分包能使你网站字体加载速度显著提升。如果你的字体没有分包，可以使用下方网站进行分包后上传到自己的CDN上。

引入CSS

详细做法上文已经说明，这里不再赘述。

在head下引入CSS文件

1
2
3
4
inject:
  head:
    # 字体(css文件地址换成你自己的)
    - <link rel="stylesheet" href="https://chinese-fonts-cdn.deno.dev/packages/lywkpmydb/dist/LXGWWenKaiScreen/result.css">

这里我使用的是中文网字计划提供的免费CDN，在这里推荐给大家！

这个项目里提供非常多的开源免费字体的托管服务，且速度较快，大家可以放心使用。

更改字体

详细做法上文已经说明，这里仅说明字体名称问题。

如果你是使用中文网字计划的字体，则在我标黄位置就可以看到字体名称。

字体名称

如果你使用的是其他字体，遗憾的是，我也不知道如何查看。目前已知可能可行的方法是你把css文件链接发给AI，他就会告诉你名称。

询问AI

把两个font-family改为AI告诉你的名称，记得加单引号。

大功告成

本篇文章分享了两种更换字体的方案。方案一借鉴了其他博主的经验，方案二是我个人的探索成果。值得一提的是，方案二的字体文件适用性更广、加载更快，与当前多数网站的方案一致，推荐给你。

此外，关于是否要写博客一周年纪念文章，我还在犹豫。主要担心自己的文笔不够好，如果最终与大家见面，很可能是一篇“AI代写”的拙作😅。

参考文章