在 Hexo 的 Butterfly 主题中，字体是影响整体阅读体验的关键因素之一。通过简单的配置调整，你可以让博客拥有更舒适、个性化的字体风格。本文将指导你如何在 Butterfly 主题中更换全局字体和代码字体。

选择合适的字体

本教程以下列字体为例：

引入字体资源

推荐使用 CDN 方式引入字体，既节省服务器资源，又能提高加载速度。

打开_config.butterfly.yml文件，找到inject部分，添加以下代码：

1
2
3
4
inject:
  head:
    - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-webfont@1.7.0/style.min.css">
    - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono@4.5.12/index.min.css">

应用字体配置

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

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

注意事项

  1. 字体文件较大，首次加载可能需要一些时间
  2. 可以根据个人喜好尝试其他开源字体
  3. 如遇字体显示异常，请检查 CDN 链接是否有效

通过上述步骤，你的 Butterfly 主题博客将拥有更美观、易读的字体风格，为读者提供更好的阅读体验。