安知鱼主题更改字体

求助#

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

复现方式：

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

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

正文#

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

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

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

方案一#

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

我更加推荐方案二。

创建CSS文件#

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

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

引入CSS文件#

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

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

在head下引入CSS文件。

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

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

更改字体#

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

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

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

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

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

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

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

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

方案二#

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

在线字体分包器

引入CSS#

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

在head下引入CSS文件

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