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 似乎无法在配置文件里 font 的 family 处配置多个字体。

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 s 或 hexo 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/blog 和 Elietio/Elietio.github.io ，有需要的可以参考。原理就是自定义 custom_file_path ，即 source/_data/** ，通过自定义的 CSS 覆盖默认样式。比如 样式的高级设置 。

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

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