前言

参考自：Butterfly 如何优雅的改字体

效果预览

实现步骤

下载字体

推荐网站：字体天下

下载字体并解压得到ttf文件

引入字体

新建fonts文件夹：Blog根目录\themes\butterfly\source\fonts，将ttf文件移到该文件夹

打开Blog根目录\source\css\custom.css，缺少的文件或文件夹直接新建即可，写入下列代码

注：font-family支持自定义名称；不要忘记修改src!

1
2
3
4
5
6
/* 字体样式 */
@font-face {
    font-family: 'ziti';
    font-display: swap;
    src: url('/fonts/MaoKenZhuYuanTi-MaokenZhuyuanTi-2.ttf') format("truetype");
}

打开主题配置文件_config.butterfly.yml，搜索font-family，定位到下列位置并将上面代码中的font-family的名称写入

注：Microsoft YaHei是为了防止字体加载不出来导致没有文本的备用字体

1
2
3
4
5
6
7
# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
  global-font-size:
  code-font-size:
  font-family: ziti,"Microsoft YaHei"
  code-font-family: