自定义网站字体

参考教程：如何修改Hexo主题：Butterfly网站字体

下载字体文件到本地

HarmonyOS Sans
JetBrainsMono

引入前的准备

创建文件夹

在网站根目录下（就是使用hexo init XXXX命令创建的网站文件夹）的source文件夹中创建存放字体的文件夹fonts以及存放自定义css的文件夹css。此处的两个文件夹的名称可以自拟，甚至可以只用一个文件夹（大货车这块），总之只要引用的时候确保路径正确即可。

添加字体文件

将需要使用到的字体文件复制到刚刚创建的fonts文件夹中，我使用的是HarmonyOS_Sans_SC_Regular.ttf和JetBrainsMono-Regular.ttf

创建字体css文件

在刚刚创建的css文件夹中新建css文件fonts.css，文件名称根据自己喜好自拟，内容如下：

1
2
3
4
5
6
7
8
9
10
11
@font-face {
    font-family: 'HarmonyOS_Sans_SC_Regular';  #定义字体的名称，可自拟
    font-display: swap; #自定义字体未加载/未加载完时则显示主题默认字体
    src: url('/fonts/HarmonyOS_Sans_SC_Regular.ttf') format("truetype");
}

@font-face {
    font-family: 'JetBrainsMono-Regular';
    font-display: swap;
    src: url('/fonts/JetBrainsMono-Regular.ttf') format("truetype");
}

在主题配置文件中引入

打开_config.butterfly.yml文件，找到以下位置，或者Ctrl + F查找Insert the code to head，在head部分引入刚刚创建的css文件

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/fonts.css">

指定字体

同样在_config.butterfly.yml文件中找到以下位置，或者Ctrl + F查找Global font settings

1
2
3
4
5
font:
  global_font_size:
  code_font_size:
  font_family: HarmonyOS_Sans_SC_Regular
  code_font_family: JetBrainsMono-Regular

运行三件套预览效果

1
hexo cl; hexo g; hexo s