Hexo 作为一款静态博客生成器，以其高效和灵活著称。默认情况下，Hexo 博客通常使用系统默认字体，这在大多数设备上表现尚可，但缺乏个性。自定义字体不仅能极大地提升博客的视觉美感，还能增强品牌识别度。本文将详细介绍如何在 Hexo 博客中引入并应用自定义字体，涵盖从在线字体服务引入到本地字体托管的多种方案。

一、 选择合适的字体

在开始技术实施之前，首先需要选择一款合适的字体。对于中文博客，我们需要兼顾中英文的显示效果。

  1. 英文衬线/无衬线字体：如 Google Fonts 提供的 Roboto、Open Sans、Lato 等。
  2. 中文字体：
    • 思源黑体：Google 和 Adobe 联合开发，开源免费，适合正文阅读。
    • 思源宋体：适合文学类、情感类博客，显得更有书卷气。
    • 霞鹜文楷：最近在中文开源社区非常流行的一款字体，字形优美，适合个人博客。（本站使用此字体）
    • 站酷系列：如站酷快乐体，适合标题使用。

注意版权：请务必确保所选字体允许在网页中嵌入使用（通常是 SIL Open Font License 或允许商用授权）。

二、 方法一：使用在线字体服务（推荐：Google Fonts）

这是最简单快捷的方法，无需下载字体文件，直接通过 CDN 引入。

1. 选取字体并获取链接

访问 Google Fonts。

  • 如果你选择的字体包含中文字符（如 Noto Sans SC），直接选择样式。
  • 如果只选英文字体，选择你喜欢的样式。
  • 点击右侧的 “Select” 按钮，生成 <link> 标签或 @import 代码。

为了兼顾中英文，通常建议选择一个英文字体作为首选，中文字体作为备选。例如，Google Fonts 提供的 Noto Serif SC（思源宋体简体中文）。

2. 在 Hexo 主题中引入

大多数 Hexo 主题（如 NexT, Butterfly, Fluid 等）都提供了注入代码的功能。

以 Butterfly 主题为例：

在主题配置文件 _config.butterfly.yml 中找到 inject 配置项，将 Google Fonts 生成的链接添加到 head 中。

1
2
3
inject:
  head:
    - <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">

以 NexT 主题为例：

NexT 主题原生支持 Google Fonts，配置更加简单。修改主题配置文件 _config.next.yml：

1
2
3
4
5
6
7
8
9
font:
  enable: true
  # Uri of fonts host, e.g. //fonts.googleapis.com (Default).
  host: https://fonts.googleapis.com
  # Global font settings used for all elements in <body>.
  global:
    external: true
    family: Noto Serif SC
    size: 1

如果你的主题不支持配置文件直接修改，可以在 source/_data/head.njk（具体文件名视主题模板引擎而定）或 layout/_partial/head.ejs 中手动添加 HTML 代码。

3. 编写 CSS 应用字体

引入字体后，必须通过 CSS 告诉浏览器在哪些地方使用该字体。通常我们需要修改 font-family 属性。

同样在主题的 inject 部分或自定义 CSS 文件中添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 示例：全局应用字体 */
body {
  font-family: "Noto Serif SC", "Microsoft YaHei", serif;
}

/* 示例：仅文章内容应用字体 */
.post-content {
  font-family: "Noto Serif SC", serif;
}

/* 示例：代码块字体保持原样或使用等宽字体 */
code, pre {
  font-family: "Fira Code", "Courier New", monospace;
}

提示：在 font-family 列表中，应将英文字体放在中文字体前面。这样，英文字符会优先使用英文字体渲染，中文字符则会回落到中文字体渲染，避免中文字体中包含的英文字符影响美观。

三、 方法二：本地托管字体文件（进阶）

使用在线字体服务虽然方便，但在国内访问 Google Fonts 可能会因为网络原因导致加载缓慢或失败，从而出现 “FOUT” (Flash of Unstyled Text) 现象。将字体下载到本地并托管在自己的博客或 CDN 上是更稳定的方案。

1. 下载字体文件

从字体官网或 Google Fonts 下载字体文件（通常为 .woff2 格式，体积最小，现代浏览器支持最好）。

2. 放置字体文件

在 Hexo 博客目录中，创建一个存放静态资源的文件夹，例如 source/fonts/。将下载好的 .woff2 文件放入该文件夹。

目录结构示例：

1
2
3
4
5
my-blog/
  source/
    fonts/
      NotoSerifSC-Regular.woff2
      NotoSerifSC-Bold.woff2

3. 使用 @font-face 定义字体

在你的自定义 CSS 文件中（如 source/css/custom.css），使用 @font-face 规则声明字体。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@font-face {
  font-family: 'MyCustomFont'; /* 自定义字体名称 */
  src: url('/fonts/NotoSerifSC-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* 推荐：优化加载体验 */
}

@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/NotoSerifSC-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

font-display: swap; 是一个重要的属性，它告诉浏览器在字体加载完成前先使用系统默认字体显示文本，加载完成后再替换，避免用户长时间看到空白页面。

4. 应用字体

CSS 定义完成后，像方法一一样在 CSS 中应用：

1
2
3
body {
  font-family: "MyCustomFont", "PingFang SC", "Hiragino Sans GB", sans-serif;
}

四、 中文字体优化技巧

中文字体文件通常非常大（几 MB 到十几 MB），直接引入会导致网页加载速度严重拖慢。以下是优化方案：

1. 字体子集化

如果你的博客只使用了该字体的部分字符（例如只需要标题或少量特殊文字），可以使用字体子集化工具提取需要的字符。

常用工具：

  • Fontmin：第一个纯 JavaScript 字体子集化方案，适合前端工程化。
  • Transfonter：在线字体转换及子集化网站。
  • 字蛛：通过分析 HTML/CSS 文件，自动提取页面中用到的字符。

以字蛛为例，安装并运行后，它可以生成仅包含必要字符的精简字体文件，体积通常能从 10MB 缩减到几十 KB。

2. 使用 CDN 加速

如果你将字体文件放在 source 目录下，Hexo 生成静态文件后，可以部署在 Vercel、Netlify 或 Cloudflare Pages 等平台。这些平台自带 CDN，能显著提高字体加载速度。

或者，你可以将字体文件上传到专业的对象存储服务（如七牛云、又拍云、阿里云 OSS）并绑定 CDN 域名，然后在 @font-face 中引用 CDN 链接。

示例图片

五、 常见问题与调试

1. 字体不生效？

  • 检查路径：确保 url() 中的路径正确。Hexo 生成后，根目录可能带有子目录（如果配置了 root），建议使用绝对路径或相对于 CSS 文件的相对路径。
  • 浏览器缓存：强制刷新浏览器（Ctrl+F5）清除缓存。
  • CSS 优先级：检查是否有其他 CSS 覆盖了你的 font-family。可以使用浏览器开发者工具（F12）检查元素的 Computed 样式。

2. 加载闪烁 (FOUT)?

这是字体加载过渡的正常现象。可以通过设置 font-display: swap 来缓解，或者调整 font-family 中的备选字体，使其大小风格与自定义字体接近，减少视觉跳动。

3. 字重 问题

务必确保引入了足够字重的字体文件。如果你在 CSS 中使用了 font-weight: bold，但没有引入 Bold 字重的字体文件，浏览器会自动模拟加粗（伪粗体），效果通常较差。建议在引入 Google Fonts 时勾选所需的所有字重（如 400, 700）。

六、 总结

为 Hexo 博客自定义字体虽然看似繁琐，但只要掌握了 引入 和 应用 两个核心步骤，就能轻松实现。对于新手，建议直接使用主题自带的 Google Fonts 配置；对于追求极致速度和稳定性的博主，建议采用本地托管 + 字体子集化的方案。

一个合适的字体能让文章阅读体验提升一个档次，希望这篇教程能帮助你打造出风格独特的个人博客。