Hexo-butterfly主题修改默认字体

Hexo-butterfly主题修改默认字体

如果你觉得 Butterfly 主题默认的字体缺少一点“设计感”,可以通过 CDN 引入或本地部署的方式来更换。这篇文章会以 霞鹜文楷 (LXGW WenKai) 作为全局字体, JetBrains Mono 作为代码字体进行演示。

方案一:通过 CDN 引入(推荐,免维护)

这种方法最省心,直接调用公共资源库的字体文件,不需要占用你自己的服务器带宽。

1. 注入资源链接

打开主题配置文件 _config.butterfly.yml,找到 inject 部分,添加以下代码来引入外部样式表:

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">

2. 应用字体声明

在同一个配置文件中找到 font 部分,将字体家族指向刚才引入的资源:

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

温馨提示:如果修改后发现字体没变化,请优先检查 CDN 链接 是否依然有效。另外,由于中文字体包体积较大, 首次加载 稍有延迟是正常现象。

方案二:本地部署字体(适合追求极致稳定)

如果你希望博客资源完全可控,不依赖外部链接,可以选择将字体文件放在本地。

1. 准备字体文件

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

2. 编写 CSS 索引

在 fonts 文件夹内新建一个 font.css 文件,写入以下定义以告知浏览器如何调用该文件:

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

3. 配置引用与生效

回到 _config.butterfly.yml,先在 inject 中引入你刚写的 CSS 文件:

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'

避雷指南:本地部署最容易在 文件路径 上栽跟头,配置时请务必核对路径是否准确。虽然目前本地部署主要针对全局字体,但这种方法能确保你的博客在任何网络环境下都有稳定的视觉呈现。