Hexo Next 主题字体相关配置

荣俊

2023-12-01

原文

https://leay.net/2020/02/14/hexo-next-font

说明

版本：Hexo 4.0、Next 7.0

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

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

挑选并配置字体

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

例如：

font:
  enable: true
  global:
    external: true
    family: Noto Serif SC 
    size:

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

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

font:
  enable: true
# ……
  codes:
    external: true
    family: Roboto Mono
    size:

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

样式的高级设置

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

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

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

道理很简单，就是用 Next 提供的自定义样式覆盖默认或者配置的样式。

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

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（若无则新建），添加自己想要设置（覆盖）的样式就好啦！

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

* {
  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 ¹实现的。

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

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

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 处配置多个字体。

# 无效配置
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 的规则²:或者 修改默认使用的字体，阔以直接到源码 source/css/_variables/base.styl 里修改。

如下面，修改 $font-family-chinese：

// 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 里开启使用自定义样式变量：

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 下注释掉你想自定义的变量。如：

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

然后在 source/_data/variables.styl （若无则新建）添加自定义变量并配置（你刚刚注释掉的变量）。

$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 的配置就可以这样：

font:
  enable: true
  host: //fonts.loli.net

官方文档

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

如果修改不生效

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

font-family 的规则是这样的：（1）优先使用排在前面的字体。（2）如果找不到该种字体，或者该种字体不包括所要渲染的文字，则使用下一种字体。（3）如果所列出的字体，都无法满足需要，则让操作系统自行决定使用哪种字体。 ↩︎
利用 font-family 的规则：比如「font-family应该优先指定英文字体，然后再指定中文字体。否则，中文字体所包含的英文字母，会取代英文字体。」这样的问题。 ↩︎

Hexo Next 主题字体相关配置

原文

说明

相关配置

挑选并配置字体

样式的高级设置

font-family

自定义样式使用的变量

googleapis 镜像

官方文档

如果修改不生效

相关阅读

相关文章

相关问答

相关文档