Hexo博客修改落霞孤鹜字体

前言

在使用 Hexo 搭建个人博客时，默认字体可能无法满足个性化需求。本文将详细记录如何将 Hexo 博客的全局字体修改为 落霞孤鹜，适用于所有 Hexo 主题。本博客已使用的字体为落霞孤鹜常规。

---

1. 下载字体文件

首先，确保你已经下载了 LXGWBrightGB-Regular.ttf 字体文件。

推荐的存放路径：

/themes/your-theme/source/fonts/

如果 fonts/ 目录不存在，可以手动创建：

mkdir themes/your-theme/source/fonts

然后，将 LXGWBrightGB-Regular.ttf 文件复制到 fonts/ 目录下。

---

2. 添加字体到 CSS

找到你的主题 CSS 文件，路径通常如下：

• Stylus 主题（如 NexT）：themes/your-theme/source/css/_variables.styl
• 普通 CSS 主题：themes/your-theme/source/css/style.css
• SCSS 主题（如 Material）：themes/your-theme/source/css/_custom.scss

在文件末尾 添加以下 CSS 代码：

@font-face {
    font-family: 'LuoxiaGuwu';
    src: url('/fonts/LXGWBrightGB-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* 设置全局字体 */
body {
    font-family: 'LuoxiaGuwu', serif;
}

📌 注意事项：

• font-family: 'LuoxiaGuwu' 可以自定义名称，但要和 @font-face 里的一致。
• url('/fonts/LXGWBrightGB-Regular.ttf') 确保路径正确。

---

3. 重新生成 Hexo 博客

在 Hexo 项目根目录运行以下命令：

hexo clean && hexo g && hexo s

然后，打开浏览器访问 http://localhost:4000/，检查字体是否生效。

---

4. 使用 WOFF/WOFF2 优化加载（可选）

TTF 文件较大，建议转换为 WOFF/WOFF2 以提高加载速度。

转换步骤：

• 使用 ttf-to-woff 生成工具 将 落霞孤鹜.ttf 转换为 .woff 和 .woff2。
• 修改 CSS 引用：

@font-face {
    font-family: 'LuoxiaGuwu';
    src: url('/fonts/落霞孤鹜.woff2') format('woff2'),
         url('/fonts/落霞孤鹜.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

再次运行 hexo clean && hexo g && hexo s 让修改生效。

---

5. 常见问题排查

Q1: 字体没有生效？

✅ 确保 落霞孤鹜.ttf 文件放在 source/fonts/ 目录下。
✅ 使用 F12 打开 开发者工具 -> Network，查看字体文件是否正确加载。
✅ 清除 Hexo 缓存后重新生成站点：

hexo clean && hexo g && hexo s

Q2: 访问字体文件时报 404？

• 确保 落霞孤鹜.ttf 文件实际存在于 public/fonts/ 目录下。
• 部署时需同步上传 fonts 目录。

---

结语

以上就是在 Hexo 博客中使用 落霞孤鹜 字体的完整过程。通过这种方式，可以自定义博客的整体风格，使其更具个性化。如果你有其他更好的 Hexo 美化方案，欢迎留言交流！🎉

🚀 Hexo 相关美化文章推荐：

• Hexo 博客如何添加背景音乐
• Hexo NexT 主题自定义配色教程