HEXO更改字体

hexo自带的字体很不好看,可能是创始人是台湾的原因?字体有一种简繁之间的感觉,看着有点别扭,于是想着更改一下字体。

参考教程:

如何修改Hexo主题:Butterfly网站字体

【Hexo】自定义字体

参考以上教程,我是这么操作的:

  1. /source目录下创建存储字体的文件夹font和存储css的文件夹css

  2. 字体网站下载喜欢的字体,我用的是谷歌字体,将下载好的字体存储到/source/font文件夹中

  3. /source/css文件夹中创建文件custom.css

  4. 编写custom.css文件

    @font-face {
    /* 为载入的字体取名字(随意) */
    font-family: 'Junbo Font';
    /* 字体文件地址(相对或者绝对路径都可以) */
    src: url('/font/sunny-spells-basic-font/SunnySpellsBasicRegular-Yz1Wv.ttf') format("truetype");
    /* 定义加粗样式(加粗多少) */
    font-weight: normal;
    /* 定义字体样式(斜体/非斜体) */
    font-style: normal;
    /* 定义显示样式 */
    font-display: block;
    }
  5. _config.butterfly.yml中修改inject部分为:

    inject:
    head:
    - <link rel="stylesheet" href="/css/custom.css"> # custom.css文件
    # - <link rel="stylesheet" href="/xxx.css">
    bottom:
    # - <script src="xxxx"></script>
  6. 再在_config.butterfly.yml中修改字体font为:

    font:
    global-font-size: '18px' # 全局字体大小
    code-font-size: '14px' # 代码字体大小
    font-family: apple-system # Junbo Font # 全局字体的样式(更改为你喜欢的字体)
    # -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Lato, Roboto, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif
    code-font-family: consolas, Menlo, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif # 代码字体样式,同上