博客网站字体更换：霞鹜文楷与汇文明朝体

最近更新了一篇字数很多的新文章，发现读起来好杂乱，感觉字体好像有些臃肿，不太适合阅读，于是打算换成我之前一直很喜欢的开源字体 —— 霞鹜文楷和汇文明朝体。打算写一写笔记，记录本次字体更换的过程，以供后续参考。

前情提要：博客基于 Hexo + Next 主题，文章在该背景下适用。

字体链接

我使用了 ZSFT（ZeoSeven™ Fonts）网站上的方法进行更换，以下是的字体页面的链接：

• 霞鹜文楷
• 汇文明朝体

当然也可以通过 Github 或者 cdnjs 来进行更换，以下是链接：

• Github：霞鹜文楷 网络字体仓库
• cdnjs: 霞鹜文楷

更换流程

配置 head 文件

首先，找到 Next 配置里的 custom_file_path，添加 head 文件的路径：

custom_file_path 配置

  head: source/_data/head.njk

如果没有这个文件的话，创建就行了，我的文件放置在以上路径，可参考参考。

嵌入字体

在以上两个 ZSFT 字体页面里，有嵌入字体这个模块，我使用的是 “HTML 强化” 这个方法，直接复制 ZSFT 里的代码放到 head 文件里应该就生效了。但我没有把 Style 那块的代码复制过来，而是在 Next 配置文件里进行配置，代码如下，仅供参考：

head 文件

<link href="https://fontsapi.zeoseven.com/292/main/result.css" onload="this.rel='stylesheet'" rel="preload" as="style" crossorigin />
<noscript><link rel="stylesheet" href="https://fontsapi.zeoseven.com/292/main/result.css" /></noscript>
<link href="https://fontsapi.zeoseven.com/256/main/result.css" onload="this.rel='stylesheet'" rel="preload" as="style" crossorigin />
<noscript><link rel="stylesheet" href="https://fontsapi.zeoseven.com/256/main/result.css" /></noscript>

Next 字体配置

font:
  enable: true
  global:
    external: false  # 关闭外部加载，使用系统字体
    family:
      - "Huiwen-mincho"
      - "Noto Serif SC"
      - "PingFang SC"
      - "Hiragino Sans GB"
      - "Microsoft YaHei"
      - "sans-serif"
    size: 1  # 16px
    font-display: swap
    
  # Font settings for site title (.site-title).
  title:
    external: false
    family:
      - "Huiwen-mincho"
      - "Noto Serif SC"
      - "PingFang SC"
      - "Microsoft YaHei"
      - "sans-serif"
    size: 1.4
    font-display: swap
  
  # Font settings for headlines (<h1> to <h6>).
  headings:
    external: false
    family:
      - "Huiwen-mincho"
      - "Noto Serif SC"
      - "PingFang SC"
      - "Microsoft YaHei"
      - "sans-serif"
    size: 1.5  # H1~H6 可按比例缩放
    font-display: swap

  # Font settings for posts (.post-body).
  posts:
    external: false
    family:
      - "LXGW WenKai"
      - "Noto Serif SC"
      - "PingFang SC"
      - "Microsoft YaHei"
      - "sans-serif"
    font-display: swap

至此，重新生成启动服务就能看到修改生效了，最后只需提交代码到 Github 上自动部署就完成啦！