修改页面字体

新建 .css 文件

在themes\butterfly\source路径下新建fonts文件夹，新建.css文件，并将字体文件一并移入文件夹。

alt text

将下面这段代码放入.css文件中。

1
2
3
4
5
@font-face {
  font-family: 'lxgwwenkai';
  font-display: swap;
  src: url('/fonts/lxgwwenkai.woff2') format('woff2');  
}

其中lxgwwenkai为自定义的字体名，url('/fonts/lxgwwenkai.woff2')为字体路径，format('woff2')为字体格式。font-display: swap; 可以保证我们的字体文件在没有加载完成之前文字使用默认字体。

对于其他格式的字体，format内容可以用如下的格式：

1
2
3
4
5
6
7
8

  src: url('.eot') format('embedded-opentype'),  /* IE6-IE8 */
       url('.ttf') format("truetype"),
       url('.woff') format('woff'),  /*chrome、firefox */
       url('.ttf') format('truetype'),  /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
       url('.svg') format('svg');  
}

修改配置文件

打开 _config.butterfly.yml 文件，修改inject ，添加如下代码：

1
<link rel="stylesheet" href="/fonts/font.css">

image-20250717113802273

继续修改font_family，改为自定义的字体名。

image-20250717113905846

其中global_font_size为全局字体大小，code_font_size为代码字体大小,font_family为全局字体名称,code_font_family为代码字体名称。