Hexo Next 主题字体相关配置

版本:Hexo 4.0、Next 7.0

搜索的一些文章里提及改动的地方挺多的,我乱试了一下,似乎并不需要那么复杂。不知道是不是我没搞懂。

可能是因为 Next 更新了一些配置简化了操作?总之记录一下。

相关配置

先看主题配置文件 _config.yml 里与字体相关的配置项:

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
40
41
42
43
44
45
46
47
font:
enable: true
# CDN
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)

# external: 控制是否使用 CDN。
# family: 字体样式。
# size: 字体大小。默认为 1(16px)。

# Global font settings used for all elements inside <body>.
# 全局配置,覆盖 <body> 标签里所有元素
global:
external: true
family:
size:

# Font settings for site title (.site-title).
# 博客名字那儿
title:
external: true
family:
size:

# Font settings for headlines (<h1> to <h6>).
# 注意这是文章里的标题,而不是侧边栏的 toc
headings:
external: true
family: #Roboto Mono
size:

# Font settings for posts (.post-body).
# 正文
posts:
external: true
family:
size:

# Font settings for <code> and code blocks.
# 代码块
codes:
external: true
family:

挑选并配置字体

Google Fonts 挑选一款字体,在配置里的 family 处添加即可。

如设置为「思源宋体」:

1
2
3
4
5
font:
enable: true
global:
external: true
family: Noto Serif SC

这样的话就会全局使用「思源宋体」。

不过我想给代码块覆盖一种字体咋办?

同理,挑选并覆盖即可。如:

1
2
3
4
5
6
7
8
font:
enable: true
global:
external: true
family: Noto Serif SC
codes:
external: true
family: Roboto Mono

其它可配值样式的覆盖详见上面的 相关配置

样式的高级设置

除开主题提供的配置,其它样式应该如何修改呢?

比如如我觉得字体颜色不够深,应该咋办?

Next 4.0 提供了加载用户自定义样式的配置。

在主题配置文件 _config.yml 里开启:

1
2
3
4
5
6
7
8
9
10
11
custom_file_path:
#head: source/_data/head.swig
#header: source/_data/header.swig
#sidebar: source/_data/sidebar.swig
#postMeta: source/_data/post-meta.swig
#postBodyEnd: source/_data/post-body-end.swig
#footer: source/_data/footer.swig
#bodyEnd: source/_data/body-end.swig
#variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
style: source/_data/styles.styl

然后在 Hexo 根目录进入 source/_data/styles.styl(若无则新建),添加自己想要覆盖的样式就好啦!

比如我要更改全局的字体颜色,就这样:

1
2
3
4
5
6
7
8
9
10
11
12
html,
body,
span,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
color: #2e405b;
}

font-family

字体设置默认使用的 CDN是 //fonts.googleapis.com。如果从 CDN 上访问失败,就会默认使用:

  • Non-code Font: Fallback to "PingFang SC", "Microsoft YaHei", sans-serif
  • Code Font: Fallback to consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace

比如本站最后渲染出来的效果是这样的(你可以打开浏览器的调试窗口查看):

1
2
3
4
5
6
7
code, pre {
font-family: 'Roboto Mono',consolas,Menlo,monospace,"PingFang SC","Microsoft YaHei";
}

body {
font-family: 'Noto Serif SC',"PingFang SC","Microsoft YaHei",sans-serif;
}

font-family 的规则是这样的:

(1)优先使用排在前面的字体。

(2)如果找不到该种字体,或者该种字体不包括所要渲染的文字,则使用下一种字体。

(3)如果所列出的字体,都无法满足需要,则让操作系统自行决定使用哪种字体。

然而很可惜的是,Next 似乎无法在 family 处配置多个字体。如果你想要利用 font-family 的规则——比如「font-family应该优先指定英文字体,然后再指定中文字体。 否则,中文字体所包含的英文字母,会取代英文字体。」这样的问题,又或者 修改默认使用的字体,阔以直接到源码 source/css/_variables/base.styl 里修改。

如下面,修改 $font-family-chinese

1
2
3
// Font families.
- $font-family-chinese = "PingFang SC", "Microsoft YaHei";
+ $font-family-chinese = "Noto Serif SC";

Next 能加载用户自定义的样式,同样也能加载用户自定义样式使用的变量。然而同样比较可惜的是,自定义样式使用的变量里的定义,不能覆盖变量默认定义的值。但是你可以在这里注释掉变量后,在自定义变量里定义并赋值。

自定义样式使用的变量

在主题配置文件 _config.yml 里开启使用自定义样式变量:

1
2
3
4
5
6
7
8
9
10
11
custom_file_path:
#head: source/_data/head.swig
#header: source/_data/header.swig
#sidebar: source/_data/sidebar.swig
#postMeta: source/_data/post-meta.swig
#postBodyEnd: source/_data/post-body-end.swig
#footer: source/_data/footer.swig
#bodyEnd: source/_data/body-end.swig
variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
#style: source/_data/styles.styl

首先,在主题的 source/css/_variables/base.styl 下注释掉你想自定义的变量。如:

1
2
// Font families.
//$font-family-chinese = "PingFang SC", "Microsoft YaHei";

然后在 source/_data/variables.styl (若无则新建)添加自定义变量的配置。

1
$font-family-chinese = "试试就试试";

我觉得 source/_data/variables.styl 的设计应该是为 source/_data/styles.styl 提供变量。像上面这样使用好像没啥必要。要说有点好处的话,就是方便了管理用户配置吧…

【我没搞这些高级的东西,感觉没必要。但是写文章时试了一下,可以跑通。】

googleapis 镜像

虽然许多文章里都提到说 fonts.googleapis.com 不太稳定,但我访问还挺顺利的…

fonts.googleapis.com 的国内 CDN 比较少,只找到这么一篇帖子。

前端 CDNJS 库及 Google Fonts、Ajax 和 Gravatar 国内加速服务

用上面帖子里提供的 CDN,Next 的配置就可以这样:

1
2
3
font:
enable: true
host: //fonts.loli.net

官方文档

https://theme-next.org/docs/theme-settings/#Fonts-Customization