钱招财的blog

Call me Heisenburg.

0%

更改 Zpix 字体

Posted on Edited on In
Symbols count in article: 1.2k Reading time ≈ 1 mins.

偶尔搜文章的时候发现有个 blog 使用了像素风的字体，很不错，就想复制过来。
首先谷歌了一下汉字的像素风字体，发现了一款 Zpix 字体。个人使用免费，准备就使用这款了。
本方法主要参考了这两篇博客 [1][2]。

Next 主题是提供了自定义的 style 的，首先在 hexo 的根目录的 source 文件夹下新建_data 文件夹。
把这段代码存为 styles.styl 文件。

1
2
3
4
5
6
7
8
@font-face{
    font-family: Zpix;
    src: url('../font/zpix/zpix.ttf');
}
code{
  font-family: "Zpix" !important;
}


从Zpix项目中下载ttf文件，存在博客根目录的 font/zpix/ 文件夹下面。

最后把 Next 主题的配置文件的 font 段改成下述。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
font:
enable: true

# Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
host: 

# Font options:
# `external: true` will load this font family from `host` above.
# `family: Times New Roman`. Without any quotes.
# `size: x.x`. Use `em` as unit. Default: 1 (16px)

# Global font settings used for all elements inside <body>.
global:
  external: true
  family: Zpix
  size:

# Font settings for site title (.site-title).
title:
  external: true
  family:
  size:

# Font settings for headlines (<h1> to <h6>).
headings:
  external: true
  family:
  size:

# Font settings for posts (.post-body).
posts:
  external: true
  family: Zpix

# Font settings for <code> and code blocks.
codes:
  external: true
  family: Zpix

最后执行以下代码：

1
2
hexo clean
hexo generate