摘要

最近想修改了一下 NexT 主题的字体配置，网上大多都是2020年的相关文章，我几乎baidu以及google了全部的相关文章，都或多或少的出现了问题。前前后后捣鼓了大概10小时，终于成功修改。这不发一篇博客记录我的痛苦经历都对不住我。呜呜呜😭😭😭。每次弄博客美化博客都花好长时间，感觉有点累了💔。

Next主题(Hexo)字体相关配置

背景

Google Fonts 分别在 2018年的11 月 18 日和 12 月 07 日提供了思源黑体和思源宋体的简繁支持，而且高达 6 种字重支持，其中思源宋体更是高达 7 种字重。这可了不得啊！更重要的是：它支持了目前电子显示屏上稀缺的宋体，这将会是一个伟大的进步！要知道，对于中文书籍，宋体一直是正文印刷的标准字体，而不是目前电子显示屏上普遍的黑体，因为宋体的衬线更适合长时间阅读。

优势

都说衬线字体（宋体）较无衬线字体（黑体）更适合阅读！
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
在西方国家罗马字母阵营中，字体分为两大种类：Sans Serif和 Serif，打字机体虽然也属于 Sans Serif，但由于是等宽字体，所以另外独立出 Monospace 这一种类，例如在Web中，表示代码时常常要使用等宽字体。

Serif的意思是，在字的笔画开始及結束的地方有额外的装饰，而且笔画的粗细会因直橫的不同而有不同。相反的，Sans Serif则沒有这些额外的装饰，笔画粗细大致差不多。

可以看出，我们平时所用的Georgia、Times New Roman等就属于Serif字体，而Arial、Tahoma、Verdana等则属于Sans Serif字体。对中文而言，同样存在这两大种类，很明显，宋体、细明体（繁体中常用）等就属于Serif，而黑体、幼圆等则属于Sans Serif。

Serif 和 Sans Serif 的一般比较
1、Serif的字体容易辨认，因此易读性较高。反之Sans Serif 则较醒目，但在行文阅读的情況下，Sans Serif 容易造成字母辨认的困扰，常会有来回重读及上下行错乱的情形。
2、Serif 强调了字母笔画的开始及结束，因此较易前后连续性的辨识。
3、Serif 强调一个word，而非单一的字母，反之Sans Serif则强调个别字母。
4、在小字体的场合，通常Sans Serif比Serif更清晰。
适用用途：
通常文章的內文、正文使用的是易读性较佳的 Serif 字体，这可增加易读性，而且长时间阅读下因为会以word为单位来阅读，较不容易疲倦。而标题、表格內用字则采用较醒目的Sans Serif字体，它需要显著、醒目，但不必长时间盯著这些字来阅读。

像宣传品、海报类，为求醒目，它的短篇的段落也会采用Sans Serif字体。但在书籍、报刊杂志，正文有相当篇幅的情形下，则应采用Serif字体来减轻读者阅读上的负担。

中文的情况
在中文的情形也是有相当于 serif 的字体，例如宋体就是 serif 的，他通常是和 Times Roman 字体来搭配的。而黑体、幼圆等就相当于是 sans serif 的字体。
在中文直排的情況，比较不容易区分 serif/sans serif 之间的差异性，但是在目前中文橫排普遍的情形下，以上所谈到的易读性、醒目性也是适用于中文的。

经常看到中文出版的书籍、杂志，内容中间使用了不易阅读，但却很醒目的黑体或者幼圆等字体，这对读者来说，在长期阅读之下很容易就引起眼睛不舒服，似乎是应该尽量避免才是。在Web设计及浏览器设置中也应遵循此原则为是。

使用

这边的配置是这样的，可以改成自己喜欢的

  • 中文字体: Noto Serif SC

  • 英文字体: EB Garamond

  • 站点标题字体: Cinzel Decorative

  • 代码字体: JetBrains Mono

    1）Next主题配置文件_config.yml

    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
# 文件位置：~/blog/themes/next/_config.yml

font:
  enable: true

  # Uri of fonts host. E.g. //fonts.googleapis.com (Default)
  # 亲测这个可用，如果不可用，自己搜索 [Google 字体 国内镜像]，找个能用的就行
  host: https://fonts.loli.net

  # Global font settings used on <body> element.
  global:
    # external: true will load this font family from host.
    external: true
    family: EB Garamond

  # Font settings for Headlines (h1, h2, h3, h4, h5, h6)
  # Fallback to `global` font settings.
  headings:
    external: true
    family: Cinzel Decorative

  # Font settings for posts
  # Fallback to `global` font settings.
  posts:
    external: true
    family: 

  # Font settings for Logo
  # Fallback to `global` font settings.
  # The `size` option use `px` as unit
  logo:
    external: true
    family:
    size: 

  # Font settings for <code> and code blocks.
  codes:
    external: true
    family: JetBrains Mono
    size:


字体获取

字体可以在Google Fonts 挑选，填入_config.yml里面相应类型的family字段即可。

看别的文章讲fonts.googleapis.com的稳定性问题，这些文章一般会建议使用fonts.loli.net，这次看到这篇帖子前端 CDNJS 库及 Google Fonts、Ajax 和 Gravatar 国内加速服务，才知道原来是后者反代了前者。

1
2
3
4
font:
  enable: true
  # Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
  host: https://fonts.loli.net

2）字体变量的定义_base.styl

在source/css/_variables/base.styl里有关于字体变量的定义，主要关注一下字体：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Font families.
/* 文件位置：~/blog/themes/next/source/css/_variables/base.styl */

$font-family-chinese      = "Noto Serif SC"

$font-family-base         = $font-family-chinese, sans-serif
$font-family-base         = get_font_family('global'), $font-family-chinese, sans-serif if get_font_family('global')

$font-family-logo         = $font-family-base
$font-family-logo         = get_font_family('logo'), $font-family-base if get_font_family('logo')

$font-family-headings     = $font-family-base
$font-family-headings     = get_font_family('headings'), $font-family-base if get_font_family('headings')

$font-family-posts        = $font-family-base
$font-family-posts        = get_font_family('posts'), $font-family-base if get_font_family('posts')

$font-family-monospace    = $font-family-chinese, monospace
$font-family-monospace    = Menlo, Monaco, Consolas, get_font_family('codes'), $font-family-chinese, monospace if get_font_family('codes')

3）external-fonts.swig

1
文件位置：~/blog/themes/next/layout/_partials/head/head.swig

将这个文件的全部内容直接替换为 Google Fonts 网站生成的 <link> 代码，然后可以将 googleapis.com 修改为 loli.net。

在~/blog/themes/next/layout/_partials/head/head.swig里Ctrl+F搜索{{ next_font() }}，然后就能看到这一段

1
2
3
4
{{ next_font() }}

{%- set font_awesome_uri = theme.vendors.fontawesome or next_vendors('font-awesome/css/all.min.css') %}
<link rel="stylesheet" href="{{ font_awesome_uri }}">

紧接着加上

1
<link href="https://fonts.loli.net/css?family=Noto+Serif+SC|Roboto&display=swap" rel="stylesheet">

4）custom.styl

1
2
3
4
5
/* 文件位置：~/blog/themes/next/source/css/_custom/custom.styl */

.post-body {
    color: #333;
}

链接

衬线体的进化：从纸面到屏幕 | 方正字库

参考

https://guanqr.com/tech/website/web-font-guide/

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 。