
就如 NexT 主题帮助文档中描述的一样,NexT 主题引入了指定字体的功能:http://theme-next.iissnan.com/theme-settings.html
比如:我想在站点中使用 Open Sans 字体,但 Google Fonts 经常打不开。所以可以将字体下载到站点中,再在站点中使用绝对路径的方式引用字体。
操作步骤
一个字体往往对应有很多字体文件的,那如何确定需要下哪些文件呢?下面以 Google 的 Open Sans 字体为例:
首先找到站点的主题配置文件(_config.yml)中的 font 部分,设置 enable 为 true,全局的 family 为 Open Sans,如:
1 | font: |
然后访问站点刷新页面,查看网络请求,会发现站点默认引用了 fonts.googleapis.com 下的一个字体样式文件。如:
文件内容是这样的:
复制该文件内容,添加到 themes/next/source/css/_custom/custom.styl 文件里,其实这里就会发现,这个样式文件通过 URL 引用了真正的外部字体文件。
然后再把这个样式描述文件中的字体一一下载到本地,并拷贝到 source\fonts 目录下,fonts 目录如果不存在则新建。这样站点本地就有这些字体了,如:
再修改上述拷贝的字体描述文件,将外部 URL 替换成本地绝对路径,即:https://fonts.gstatic.com/s/opensans/v17
替换成/fonts
。
最后修改主题配置文件的 font 部分。因为字体站点本身已经有了,所以不使用 Google Fonts 的在线字体,enable 设置为 false,如:
1 | font: |
再刷新页面,会发现已经请求到站点本身的字体文件了:
这样在 Hexo NexT 主题中配置自定义字体就完成了。
参考
http://comicneue.com/
https://fonts.google.com/?selection.family=Open+Sans