Hexo的Butterfly主题更换网站字体

概述

hexo的Butterfly主题是可以更换字体的，更换字体的情况分为两种：

使用系统自带的字体
使用从网上下载的字体

实现过程

使用系统自带的字体

查看系统字体

去查看系统有哪些字体，打开设置后根据下图查看（我的电脑系统是Windows11）

设置字体

去修改主题文件夹下的_config.yml的配置文件，找到下面代码

# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
  global-font-size:
  code-font-size:
  font-family: 
  code-font-family: consolas

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

一些配置说明如下：

配置	说明
`font.font-family`	全局字体样式
`font.code-font-family`	代码字体样式
`blog_title_font.font-family`	主页的左上角名字以及居中网站名字的字体样式，如果不设置就以全局字体为准

使用从网上下载的字体

下载字体

网址：字体下载|字体下载大全免费 (ztxz.net.cn)

下载好的字体文件后缀名都是.ttf

使用字体

新建存放下载字体的文件夹

在主题的source文件夹下新建一个font文件夹，用于存放下载的字体

新建CSS文件用于定义和设置网站的字体（设置字体也可以到主题的配置中设置，看上面）

在主题文件夹的/source/css文件夹下新建一个CSS文件，命名为font.css，内容如下：

@font-face{
    font-family: 'HarmonyOS_Sans';
    font-display: swap;
    src: url('../font/HarmonyOS_Sans.ttf') format("truetype");
}
@font-face{
    font-family: 'MiaoKenTang';
    font-display: swap;
    src: url('../font/MiaoKenTang.ttf') format("truetype");
}
body {
    font-family: 'MiaoKenTang';
}

在主题配置中引入CSS

去修改主题文件夹下的_config.yml的配置文件，找到下面代码，引入font.css

# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
     - <link rel="stylesheet" href="/css/font.css">
  bottom:
    # - <script src="xxxx"></script>