Hexo-butterfly主题修改默认字体

如果你觉得 Hexo-Butterfly 主题默认的字体不太好看，根据本教程，你可以修改为其他字体。这篇文章提供了两种修改方法，任选一种即可。另外，本篇教程会以 霞鹜文楷 (LXGW WenKai) 作为全局字体， JetBrains Mono 作为代码字体进行演示。

方案一、通过 CDN 引入字体

1. 引入字体

打开主题配置文件 _config.butterfly.yml，找到 inject 部分，添加head：

inject:
  head:
    - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lxgw-wenkai-screen-webfont/1.7.0/style.min.css">
    - <link rel="stylesheet" href="https://fonts.cdnfonts.com/css/jetbrains-mono">

如果你嫌弃我提供的CDN速度太慢了，可根据 国内速度快的CDN加速源 - Hexvork 我这篇文章选择其他CDN加速源。

2. 应用字体

在同一个配置文件中找到 font 部分，修改font_family和code_font_family部分：

font:
  global_font_size: 16px
  code_font_size: 14px
  font_family: '"LXGW WenKai Screen", sans-serif'
  code_font_family: '"JetBrains Mono", monospace'

如果修改后发现字体没变化，请先检查 CDN 链接 是否有效。首次加载稍有延迟是正常现象。

方案二、本地引用字体

1. 准备字体文件

打开LxgwWenKai字体仓库

从仓库下载 LXGWWenKai-Regular.ttf 字体文件，并将其放入Hexo博客目录的 themes/butterfly/source/fonts/ 路径下。

2. 添加字体规则CSS

在 themes/butterfly/source/fonts/ 文件夹内新建一个 font.css 文件，写入以下 CSS 代码：

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

3. 修改配置

在 _config.butterfly.yml或者_config.yml文件中的 inject 部分 中导入你刚写的字体规则文件：

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

最后在 font 配置项中完成字体修改：

font:
  global_font_size: 16px
  code_font_size: 14px
  font_family: '"LXGW WenKai Screen", sans-serif'
  code_font_family: '"LXGW WenKai Screen", sans-serif'

完成。

运行hexo cl && hexo g && hexo s来看下有没有生效，如果生效了，直接hexo d即可

结语

希望这篇文章能帮助你成功修改 Hexo-Butterfly 主题的默认字体，有问题或者建议，欢迎评论区留言或者问AI。