折腾字体

​ 随着文章越写越多，忽然想站在读者端重新审视一下我的博客站。

​ 在阅读文章的过程中，发现站点的字体有点过于紧凑，可能会给读者带来紧张的阅读感，遂研究如何更换一下字体。

字体文件之殇

​ 传说中东方大国的文字特别复杂，所以渲染字体的文件动辄 10-20MB 大小，要是直接拿到站点加载，那么很多人在能看到我站点内容的前 1min 左右都会显示的是白色的屏幕，这对读者的耐心是个很大的考验（你是谁呀？非看你的东西不可啊？）

​ 所以我就在互联网上开始找相关的解决方案，忽然一个网站进入我的视线——中文网字计划官网（网站地址我会写在下面）

​ 看来不止我一个人发现了这个字体文件过大加载时间过长的问题，并且已经有了比较完美的解决方案。

​ 简单来说，这个网站可以直接让你在网站上引用字体，并且更牛的是他会把很大的字体文件切片给到 HTML 渲染端，或者我们也可以理解为，只有在我们的网站上存在的字体才会被渲染成目标字体，这将大大减少字体文件传输的“割裂感”。

​ 好了，如果你能看到这里说明你对这个字体的使用应该也比较感兴趣了，咱们直接上使用方法

​ 注：本文章主要是针对更换 Hexo 的字体进行说明，如果你的网站不是 Hexo 框架的，大致思路是没问题的，具体的细节可能还需要看具体情况，如果你需要的话，可以在下面留言，我有时间会回复你。

搞起！

​ 先说一下需要具备的前置环境：

  • Hexo（最好是可以直接 git 钩子自动部署的，这样免去你来回手动上传文件的麻烦）
  • 中文网字计划官网点击跳转

第一步——找到你喜欢的字体

​ 先打开上面的中文网字计划官网，去里面找你喜欢的字体（很多漂亮的字体，选择困难症慎入。）

​ 选定字体之后（比如现在你看到我的站点的字体为：MapleMono-CN-Light，点击详情，之后你会看到字体的预览，包含中文和英文，如果满意，你可以看到下面会有嵌入代码，这里我们只需要他的网址：

从 https 开头一直到 css 结尾这个文件地址就是我们想要的，比如我的是https://chinese-fonts-cdn.deno.dev/packages/maple-mono-cn/dist/MapleMono-CN-Light/result.css

第二步——创建自定义CSS文件

​ 嗯…如果你暂时还不知道什么是 CSS 文件，你就可以把它理解成，这就是配合 HTML 渲染的一个小文件，虽然页面内容是 HTML 说的算，但是以什么样貌示人一般是由 CSS 里面的代码控制的。

​ 你可以在你的 Hexo 项目根目录下，进入/source/css/文件夹（如果没有就新建一个），然后创建一个名为custom.css的文件。

​ 然后在这个custom.css文件中写入以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 1. 引入中文网字计划提供的 CSS 链接 */
@import url('[你刚才复制的字体网址]');

/* 2. 应用到全局 */
:root {
  --global-font-family: '[你的字体名称]', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --global-font-size: 16px;
}

body {
  font-family: var(--global-font-family) !important;
}

/* 3. 针对标题单独优化（可选） */
#site-title, #site-subtitle, .article-title, h1, h2, h3, h4, h5, h6 {
  font-family: var(--global-font-family) !important;
  font-weight: bold;
}

第三步——引用自定义的CSS

​ 打开你的主题配置文件（也就是你主题文件夹里面的_config.yml文件），搜索inject，将刚才的CSS文件引入：

1
2
3
4
inject:
  head:
    # 引入你刚才创建的文件
    - <link rel="stylesheet" href="/css/custom.css">

​ 为了防止和其他的字体配置（如Google Fonts产生冲突），建议在_config.yml中关闭默认字体引用：

1
2
font:
  enable: false # 设置为 false，完全交给自定义 CSS 控制

第四步——清理并预览

​ 在你的终端执行以下命令，观察字体是否生效：

1
2
3
hexo clean
hexo g
hexo s

如果没问题的话，就可以看到新的字体渲染了。

Enjoy And Peace！