Hexo主題自定義字體

Posted on Edited on In Views:
本文记录了Hexo博客系统中使用和修改Next主题相关配置的信息。不适用Google Fonts方案，选择个性化的中文字体并实现在线加载字体的功能，找到了中文网字这个宝藏工具，可以将字体分包后本地化部署，方便使用。

Hexo Next 主題自定義字體

Google Fonts 訪問字體速度較慢，有時也會打不開，同時支持的中文字體很少。
Google Fonts 国内版也不好用，
發現只有英文字體可以預覽，而漢字沒有預覽，估計也用不了，也沒有自己想要的字體。

1.字體推薦

在解決字體顯示問題時，發現了一個台灣網站上推薦的日本鋼筆字體，字體包含了繁體字庫（為什麼這裡要使用繁體字進行寫作的原因···）

字體名稱： Klee One

Google Fonts的字體：漢字篇

2.字體本地化

選中了字體，下一步就是要解決如何使用的問題了，google fonts 和 替代的鏡像地址都不可用。

於是尋找本地化的方法，因為中文字庫較大，使用網絡加載速度很慢，但是還是找到了解決辦法，來自中文網字計劃，通過在線文字分包器，將文件分解成若干個小文件，本地化部署後，通過調取result.css文件實現文字的調用。

將打包下載的字體文件放置source/font目錄下,font為自定義目錄，資源將同步至服務器端，便於調取，同時避免部署在別處，出現跨域訪問的問題。

3.修改配置文件

通過增加一段代碼，使網頁訪問時調取該字體。修改node_modules/hexo-theme-next/layout/_partials/head/head.njk文件，在{{ next_font() }}前增加一行代碼

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

4.字體文件調用

修改node_modules/hexo-theme-next/source/css/_varibales/base.styl文件，找到並修改。

1
2
3
// Font families.
// $font-family-chinese = 'PingFang SC', 'Microsoft YaHei';
$font-family-chinese = 'Klee One';

5.其他

主題配置頁面_config.yml中font: enable設為false,global:family無需設置

6.后记

使用繁体字库有点儿麻烦，最后还是换回简体字库，找了 由「霞鹜文楷 GB」「芫荽」组合的字体，都是KleeOne的衍生字库。效果也不错。