写在前面

一直心心念念butterfly搭的网站公式字体不好看（原始字体应该是Latin Modern Roman），又苦于前端知识拮据，没有办法从根本上解决，时间一久自己把这事也给忘了，直到…

直到前天更新了一波矩阵论的笔记（起因是实习同事问了一句矩阵导数怎么求，推了半天没有推出来，然后走火入魔，花了两天时间把这一大堆东西全部自己证了一遍才心满意足），方才又想起来了这个问题，所幸，这次总算解决了。

配置步骤

言归正传，经过数据流分析，查阅到原始代码使用的是远程网站的字体库和css伪类文件，因此在本地文件夹中找不到fonts文件夹，也没有CSS伪类文件，可通过修改渲染路径的方式，将本地字体发送到github的Actions服务器内实现字体自定义。

存放字体文件

找到themes文件夹，即存放butterfly工程文件夹的上级，进入网站的工作文件夹themes/butterfly/source，在这里存放字体库和CSS类文件，这个文件夹可以在已经安装的katex软件目录中找到，一般存储于hexo根目录下的node_modules\katex\dist，当然，偷懒也可以运行以下命令，可以一步配置好：

1
2
3

git clone git@github.com:BugBubbles/NpmKatex.git
mv NpmKatex/dist .
rm -r NpmKatex

设置自定义字体

字体在路径dist/fonts里面，仅支持配置ttf、woff和woff2三种格式，本文选用的是接近Times风格的STIX字体，这是开源字体中收录符号最全的数学字体集。Texlive会预装该字体，位置在texlive\<version>\texmf-dist\fonts\opentype\public\stix，未安装texlive的可以单独在此处下载字体包：

1	git clone -b fonts git@github.com:BugBubbles/NpmKatex.git

字体在线转换器链接可参考这里，将转换得到的字体放于文件夹后，修改同一级路径下，对应的风格文件katex.css或katex.min.css，着重修改这几个属性：

@font-face {
  font-family: 'KaTeX_AMS';
  src: url(fonts/KaTeX_AMS-Regular.woff2) format('woff2'), url(fonts/KaTeX_AMS-Regular.woff) format('woff'), url(fonts/KaTeX_AMS-Regular.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'KaTeX_Caligraphic';
  src: url(fonts/KaTeX_Caligraphic-Bold.woff2) format('woff2'), url(fonts/KaTeX_Caligraphic-Bold.woff) format('woff'), url(fonts/KaTeX_Caligraphic-Bold.ttf) format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'KaTeX_Caligraphic';
  src: url(fonts/KaTeX_Caligraphic-Regular.woff2) format('woff2'), url(fonts/KaTeX_Caligraphic-Regular.woff) format('woff'), url(fonts/KaTeX_Caligraphic-Regular.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'KaTeX_Fraktur';
  src: url(fonts/KaTeX_Fraktur-Bold.woff2) format('woff2'), url(fonts/KaTeX_Fraktur-Bold.woff) format('woff'), url(fonts/KaTeX_Fraktur-Bold.ttf) format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'KaTeX_Fraktur';
  src: url(fonts/KaTeX_Fraktur-Regular.woff2) format('woff2'), url(fonts/KaTeX_Fraktur-Regular.woff) format('woff'), url(fonts/KaTeX_Fraktur-Regular.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'KaTeX_Main';
  src: url(fonts/STIX-Bold.woff2) format('woff2'), url(fonts/STIX-Bold.woff) format('woff'), url(fonts/STIX-Bold.ttf) format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'KaTeX_Main';
  src: url(fonts/STIX-BoldItalic.woff2) format('woff2'), url(fonts/STIX-BoldItalic.woff) format('woff'), url(fonts/STIX-BoldItalic.ttf) format('truetype');
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: 'KaTeX_Main';
  src: url(fonts/STIX-Italic.woff2) format('woff2'), url(fonts/STIX-Italic.woff) format('woff'), url(fonts/STIX-Italic.ttf) format('truetype');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'KaTeX_Main';
  src: url(fonts/STIX-Regular.woff2) format('woff2'), url(fonts/STIX-Regular.woff) format('woff'), url(fonts/STIX-Regular.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'KaTeX_Math';
  src: url(fonts/STIX-BoldItalic.woff2) format('woff2'), url(fonts/STIX-BoldItalic.woff) format('woff'), url(fonts/STIX-BoldItalic.ttf) format('truetype');
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: 'KaTeX_Math';
  src: url(fonts/STIX-Italic.woff2) format('woff2'), url(fonts/STIX-Italic.woff) format('woff'), url(fonts/STIX-Italic.ttf) format('truetype');
  font-style: italic;
}
@font-face {
  font-family: 'KaTeX_SansSerif';
  src: url(fonts/KaTeX_SansSerif-Bold.woff2) format('woff2'), url(fonts/KaTeX_SansSerif-Bold.woff) format('woff'), url(fonts/KaTeX_SansSerif-Bold.ttf) format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'KaTeX_SansSerif';
  src: url(fonts/KaTeX_SansSerif-Italic.woff2) format('woff2'), url(fonts/KaTeX_SansSerif-Italic.woff) format('woff'), url(fonts/KaTeX_SansSerif-Italic.ttf) format('truetype');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'KaTeX_SansSerif';
  src: url(fonts/KaTeX_SansSerif-Regular.woff2) format('woff2'), url(fonts/KaTeX_SansSerif-Regular.woff) format('woff'), url(fonts/KaTeX_SansSerif-Regular.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'KaTeX_Script';
  src: url(fonts/KaTeX_Script-Regular.woff2) format('woff2'), url(fonts/KaTeX_Script-Regular.woff) format('woff'), url(fonts/KaTeX_Script-Regular.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'KaTeX_Size1';
  src: url(fonts/KaTeX_Size1-Regular.woff2) format('woff2'), url(fonts/KaTeX_Size1-Regular.woff) format('woff'), url(fonts/KaTeX_Size1-Regular.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'KaTeX_Size2';
  src: url(fonts/KaTeX_Size2-Regular.woff2) format('woff2'), url(fonts/KaTeX_Size2-Regular.woff) format('woff'), url(fonts/KaTeX_Size2-Regular.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'KaTeX_Size3';
  src: url(fonts/KaTeX_Size3-Regular.woff2) format('woff2'), url(fonts/KaTeX_Size3-Regular.woff) format('woff'), url(fonts/KaTeX_Size3-Regular.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'KaTeX_Size4';
  src: url(fonts/KaTeX_Size4-Regular.woff2) format('woff2'), url(fonts/KaTeX_Size4-Regular.woff) format('woff'), url(fonts/KaTeX_Size4-Regular.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'KaTeX_Typewriter';
  src: url(fonts/KaTeX_Typewriter-Regular.woff2) format('woff2'), url(fonts/KaTeX_Typewriter-Regular.woff) format('woff'), url(fonts/KaTeX_Typewriter-Regular.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

完成修改后，只需要最后一步，就能让改动后的字体生效。

设置CSS类路径

在博客根目录下，配置文件_config.butterfly.yml，选用katex作为渲染软件，设置：

katex:
  enable: true
  per_page: false
  hide_scrollbar: true

修改最后面的option选项，设置katex的类文件加载路径为相对路径，这里的相对路径是相对themes/butterfly/source/这个工作目录而言的。

1
2
3

option:
    katex: /path/to/your/local/katex.min.css（或者katex.css）
    katex_copytex: https://cdn.jsdelivr.net/npm/katex/dist/contrib/copy-tex.js（或者copy-tex.min.js）

检验你的配置是否生效，可以运行hexo命令：

1	hexo clean && hexo g && hexo s

打开本地网页或者查看生成的public文件夹下网站标签页的index.html，在最后一行，可见修改生效：

</script><div class="js-pjax"><link rel="stylesheet" type="text/css" href="/dist/katex.css"><script src="https://cdn.jsdelivr.net/npm/katex/dist/contrib/copy-tex.js"></script><script>(() => {
  document.querySelectorAll('#article-container span.katex-display').forEach(item => {
    btf.wrap(item, 'div', { class: 'katex-wrap'})
  })
})()</script></div><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>

到此，可以优雅地欣赏自己又一次折腾辛苦配置的劳动成果。