摘要

最近想修改了一下 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 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 。