Hexo-Cactus主题字体变更

这次整了个Hexo-Cactus的theme,网络上的资料和讨论远比NexT少。所以想换字体的时候就找不到特别详细的经验分享,只能自己去看文件研究。

不像NexT,Cactus并没有在config文件中给出设定字体的位置,所以就到hexo-theme-cactus\source\css文件里去找。这里相关的文件有两个,分别是 _fonts.styl 和 _variables.styl。

首先在 _fonts.styl 中通过font-face导入需要的字体,默认是有自带的Meslo的。Meslo所的这个地址也就是存放字体文件的位置,可以将自己的字体文件放过去并引用。

fontstyl.png

Fig1. _fonts.styl中用font-face导入想要的字体。

并在 _variables.styl 中将导入的字体设置。

varstyl.png

Fig 2. _variables.styl 中设置font-family-body和font-family-mono使用的字体。

这里把两个英文字体写在了前面,因为中文字体的英文没有他俩好看。

之后保存,hexo clean,hexo s,就可以检查效果了。

涉及代码:

_fonts.styl

1
2
3
4
5
6
7
8
9
10
11
12
@font-face
font-family: "Microsoft YaHei", sans-serif
src: local("Microsoft YaHei")

@font-face
font-family: "Hiragino Sans GB", sans-serif
src: local("Hiragino Sans GB")

@font-face
font-style: normal
font-family: "Meslo LG"
src: local("Meslo LG S"), url("../lib/meslo-LG/MesloLGS-Regular.ttf") format("truetype")

_variables.styl

1
2
3
// Fonts
$font-family-body = "Menlo", "Meslo LG", "Microsoft YaHei", "Hiragino Sans GB", monospace
$font-family-mono = "Menlo", "Meslo LG", "Microsoft YaHei", "Hiragino Sans GB", monospace