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