把Hexo博客NexT主题文章字体改成思源宋体，通过Adobe Typekit加载

source_hans_serif_s

我想把文章字体改成思源宋体，NexT主题配置的设置字体中有通过_config.yml设置文件中的选项实现文章字体修改的：

font:
  enable: true
  # 外链字体库地址，例如 //fonts.googleapis.com (默认值)
  host:
  # 文章字体
  posts:
    external: true
    family:

但这个前提是要把外链字体库地址写好。但是Google Fonts尚未托管思源宋体，直接在这里写就不合适了。网上大家都是通过Adobe Typekit来实现思源宋体加载的，在Hexo中使用Typekit来加载思源宋体有相关文章涉及，如Hexo 折腾手记其一：使用 Adobe Typekit 云字体 (Web Font)，不过在NexT主题中如何加载，似乎没有针对性的文章（Google搜索“Hexo NexT Typekit”没有得到针对性的结果），我自己稍微探索一下搞定了。

获取Adobe Typekit代码

如何获取Adobe Typekit代码，上述文章已有提及，这里注意注册Adobe ID时选择国家/地区时必须选择中国（China）以外的选项，因为根据Adobe的限制，Typekit在中国不能使用，所以国家选择中国的Adobe ID进入Adobe Typekit会显示Access Denied。

进入Adobe Typekit，创建Kit，找到Source Han Serif Simplified Chinese字体加入Kit中。加入时会提示要把Kit转化为使用Dynamic Link，应该是因为东亚字体太大，需要动态加载，这也是好事，这样就只动态加载需要的字形，而不用下载整个动辄几十M的字体。注意要点Publish，然后切换到Embed Code，可以看到相应的嵌入代码：

1 2	<script src="https://use.typekit.net/<Your_kitId>.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script>

其中<Your_kitId>为自己生成的Kit的ID。

利用Data Files功能，加入Adobe Typekit代码及做文章字体设置

接下来就是让NexT主题加载Typekit的代码，并设置文章正文字体了。网上关于NexT主题改字体的非官方文章通常有一段时日了，除了改_config.yml之外，很多都提到直接修改themes/next主题目录内的文件来实现，但这样在主题更新时要处理一些文件冲突就比较麻烦。

其实NexT已经提供了Data Files功能，6.0.2版起更实现了通过此功能把主题的自定义设置文件可以都放在主题目录以外。所以可以方便地使用这个功能，把我们需要的代码放置在Hexo主目录下的设置文件_config.yml以及source/_data目录下的自定义设置文件里，这样可以直接与其他Hexo源文件一起用git同步，在以后更新NexT主题的文件时也不用担心主题设置丢失。

具体到加思源宋体这个问题，我们要放的有两个，一个是把上述Typekit代码放到站点的<head>里，要利用对head的自定义设置来实现；一个是指定文章正文使用思源宋体，这个要通过指定自定义的css variables来实现。这里我首先使用上述Data Files功能提到的Hexo-Way，将指定相关自定义文件路径的主题配置写在Hexo的_config.yml文件中：

theme: next
theme_config:
  custom_file_path:
    # Default paths: layout/_custom/*
    head: source/_data/head.swig
    #header: source/_data/header.swig
    #sidebar: source/_data/sidebar.swig

    # Default path: source/css/_variables/custom.styl
    variables: source/_data/variables.styl
    # Default path: source/css/_mixins/custom.styl
    #mixins: source/_data/mixins.styl
    # Default path: source/css/_custom/custom.styl
    #styles: source/_data/styles.styl

把themes/next/_config.yml中的custom_file_path内容复制到Hexo主目录的_config.yml文件中，并把上述head和variables两个文件设置的注释取消，使其起效。

然后创建source/_data目录，新建head.swig和variables.styl两个文件。

head.swig文件中写入上述获取到的Typekit代码：

1 2	<script src="https://use.typekit.net/<Your_kitId>.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script>

variables.styl文件中则写入$font-family-posts变量设置：

1	$font-family-posts = "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", source-han-serif-sc, "宋体", serif, $font-family-base

这个字体的写法参考了思源宋体，如何评价，以及如何正确使用。上述写法把_config.yml文件里面的文章正文字体设置忽略掉，只用全局的$font-family-base做fallback。

完成以上设置，hexo clean，hexo g，hexo d后，文章正文就用上了思源宋体。
blog_with_source_hans