Hexo Next 主题字体相关配置

版本:Hexo 4.0、Next 7.0

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

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

PS:Hexo Next 的瞎几把优化可以看看这篇:尝试折腾了下用 hexo-next-theme 搭建的博客

相关配置

先看主题配置文件 _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
6
font:
enable: true
global:
external: true
family: Noto Serif SC
size:

如此配置之后,基于 hexo-next-theme 的博客就会全局使用「思源宋体」。

同理,配置代码块的字体也只需要挑选并覆盖相应配置即可。如:

1
2
3
4
5
6
7
font:
enable: true
# ……
codes:
external: true
family: Roboto Mono
size:

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

样式的高级设置

主题提供的字体配置挺到位的,但仍然有限。

一是只能配置 global、title、headings、posts、codes 几处(其实也挺丰富了);二是能配置切换字体,设置字体大小,但不能设置颜色等;三是字体只能设置一种 —— 网页是支持多种字体按优先级展示的。

这些问题,可以使用 Next 4.0 提供的「加载用户自定义样式的配置」解决。

道理很简单,就是用 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

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

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

1
2
3
* {
color: #2e405b;
}

PS:同理,这里也可以覆盖博客的各种样式

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

非代码的文字使用 "PingFang SC", "Microsoft YaHei", sans-serif

代码块使用 consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace

浏览器要知道用什么字体,实际上是通过读取 CSS 属性 font-family [1]实现的。

在 Next 里,font-family 的默认值就是上面的两项。当我们在配置文件的 font 里添加字体后,被添加的字体就会被插入到 font-family 默认值的头部 —— 当 font-family 里配置了好几个值时,浏览器会优先使用排在前面的字体。

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

1
2
3
4
5
6
7
8
9
body {
font-family: "Noto Serif SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

code,
pre {
font-family: "Roboto Mono", consolas, Menlo, monospace, "PingFang SC",
"Microsoft YaHei";
}

然而很可惜的是,Next 似乎无法在配置文件里 fontfamily 处配置多个字体。

1
2
3
4
5
6
7
8
# 无效配置
font:
enable: true
global:
external: true
family: Noto Serif SC , Noto Serif SC
# family: [Noto Serif SC , Noto Serif SC]
# family: "Noto Serif SC , Noto Serif SC"

如果你想要利用 font-family 的规则[2]:或者 修改默认使用的字体,阔以直接到源码 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 能加载用户自定义的样式,同样也能加载用户自定义样式使用的变量。然而同样比较可惜的是,自定义样式使用的变量里的定义(source/_data/variables.styl),不能覆盖变量默认定义的值hexo-next-theme/source/css/_variables/)。但是你可以在默认定义里注释掉变量后,在自定义变量里重新定义并赋值。

自定义样式使用的变量

在主题配置文件 _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

如果修改不生效

  1. 浏览器清理下缓存。
  2. 是部署后没效果还是本地就没效果?hexo shexo d 前使用 hexo clean 清理下。
  3. 部署后没效果的话,稍微等一下远程的缓存刷新。
  4. 本地没生效的话,CSS 文件夹有没有使用 CDN?
  5. 再不行,进主题的 CSS 文件,或后文里提到的 styles.styl.post-body 单独添加字体相关的 CSS。
  6. 尝试升级 hexo-theme……
  7. 如果仍不能正常显示,或者确定不是自己的问题,可以去 theme-next/hexo-theme-next 提 issue 。

关于本博客的样式

本博客的样式抄袭了 木子零の轨迹,两位大佬都公布了自己的源码,分别在 muzi502/blogElietio/Elietio.github.io ,有需要的可以参考。原理就是自定义 custom_file_path ,即 source/_data/** ,通过自定义的 CSS 覆盖默认样式。比如 样式的高级设置


  1. font-family 的规则是这样的:(1)优先使用排在前面的字体。(2)如果找不到该种字体,或者该种字体不包括所要渲染的文字,则使用下一种字体。(3)如果所列出的字体,都无法满足需要,则让操作系统自行决定使用哪种字体。 ↩︎

  2. 利用 font-family 的规则:比如「font-family 应 该优先指定英文字体,然后再指定中文字体。否则,中文字体所包含的英文字母,会取代英文字体。」这样的问题。 ↩︎