7
17
Hexo博客修改落霞孤鹜字体
2025-04-01 12:31:22
0点赞
0收藏
0评论
前言
在使用 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.cssSCSS 主题（如 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 主题自定义配色教程
作者声明本文无利益相关，欢迎值友理性交流，和谐讨论～
