Hexo NexT 主题添加自定义字体

就如 NexT 主题帮助文档中描述的一样,NexT 主题引入了指定字体的功能:http://theme-next.iissnan.com/theme-settings.html

1574133211219

比如:我想在站点中使用 Open Sans 字体,但 Google Fonts 经常打不开。所以可以将字体下载到站点中,再在站点中使用绝对路径的方式引用字体。

操作步骤

一个字体往往对应有很多字体文件的,那如何确定需要下哪些文件呢?下面以 Google 的 Open Sans 字体为例:

首先找到站点的主题配置文件(_config.yml)中的 font 部分,设置 enable 为 true,全局的 family 为 Open Sans,如:

1
2
3
4
5
6
7
8
9
10
11
font:
enable: true

# Uri of fonts host, e.g. //fonts.googleapis.com (Default).
host:

# Global font settings used for all elements in <body>.
global:
external: true
family: Open Sans
size:

然后访问站点刷新页面,查看网络请求,会发现站点默认引用了 fonts.googleapis.com 下的一个字体样式文件。如:

1574134427210

文件内容是这样的:

1574134467873

复制该文件内容,添加到 themes/next/source/css/_custom/custom.styl 文件里,其实这里就会发现,这个样式文件通过 URL 引用了真正的外部字体文件。

然后再把这个样式描述文件中的字体一一下载到本地,并拷贝到 source\fonts 目录下,fonts 目录如果不存在则新建。这样站点本地就有这些字体了,如:

1574134731266

再修改上述拷贝的字体描述文件,将外部 URL 替换成本地绝对路径,即:https://fonts.gstatic.com/s/opensans/v17替换成/fonts

1574135551700

最后修改主题配置文件的 font 部分。因为字体站点本身已经有了,所以不使用 Google Fonts 的在线字体,enable 设置为 false,如:

1
2
3
4
5
6
7
8
9
10
11
font:
enable: false

# Uri of fonts host, e.g. //fonts.googleapis.com (Default).
host:

# Global font settings used for all elements in <body>.
global:
external: true
family: Open Sans
size:

再刷新页面,会发现已经请求到站点本身的字体文件了:

1574135299754

这样在 Hexo NexT 主题中配置自定义字体就完成了。

参考

http://comicneue.com/

https://fonts.google.com/?selection.family=Open+Sans