打造你的专属博客字体：Mizuki 主题字体自定义完全指南
嘿，各位博客爱好者们！👋 厌倦了千篇一律的默认字体，想让你的 Mizuki 博客焕发独特魅力吗？今天，我就来手把手教你如何为你的博客添加自定义字体，让你的文字在视觉上也能与众不同！
准备工作：你的字体宝藏
首先，你需要准备好你心仪的字体文件。它们通常是 .ttf、.woff 或 .woff2 格式。如果你还没有，可以去一些免费字体网站（比如 Google Fonts、字由等）寻找灵感，或者使用你自己的设计字体。
小贴士：.woff2 格式的字体文件通常体积更小，加载速度更快，是网页字体的首选哦！
第一步：安放你的字体文件
拿到字体文件后，我们需要给它们找个“家”。在你的 Mizuki 项目中，找到 public/assets/font/ 这个目录，然后把你的字体文件复制进去。比如，我这里放了一个叫做 MyAwesomeFont.ttf 的字体。
public/assets/font/├── MyAwesomeFont.ttf└── ... (其他字体文件)为了方便管理，建议给字体文件起一个清晰易懂的名字。
第二步：告诉浏览器你的新字体
现在，我们需要告诉浏览器你的博客有新字体啦！这需要修改 src/styles/main.css 文件。
2.1 声明你的字体
打开 src/styles/main.css，在文件里找到 @font-face 的定义区域（通常在文件开头）。在这里，添加你的新字体声明：
/* 引入我的超棒字体 */@font-face { font-family: 'MyAwesomeFont'; /* 给你的字体起个名字，CSS里就用它 */ src: url('/assets/font/MyAwesomeFont.ttf') format('truetype'); /* 字体文件的路径 */ font-weight: normal; /* 字体的粗细，根据你的字体文件调整 */ font-display: swap; /* 字体加载策略，推荐用这个，能让页面更快显示文字 */}参数解读：
font-family: 这是你在 CSS 中引用这个字体时会用到的名字，可以随意取，但要保持一致。src: 指向你刚才放到public/assets/font/目录下的字体文件。font-weight: 如果你的字体有不同的粗细（比如常规、粗体），你可以在这里指定。如果没有特殊需求，normal就够了。font-display: swap: 这是一个很棒的属性！它会先用系统默认字体显示文本，等你的自定义字体加载完成后再替换掉，这样用户就不会看到空白页面了。
2.2 创建一个“启用”类
为了方便控制，我们再为这个字体创建一个 CSS 类。同样在 src/styles/main.css 中，找到 .zen-maru-gothic-enabled 这样的字体启用类，然后模仿它添加你的新类：
/* 当我的超棒字体启用时，应用为全局字体 */.my-awesome-font-enabled { font-family: 'MyAwesomeFont', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;}注意：类名建议使用小写字母和连字符，比如 my-awesome-font-enabled。后面的 system-ui, -apple-system, ... 是一系列备用字体，当你的自定义字体加载失败时，浏览器会依次尝试这些字体，保证页面有字体显示。
第三步：让你的博客“认识”新字体
现在，你的博客需要知道有这个新字体选项，并且可以控制它的启用状态。这需要修改两个配置文件。
3.1 修改主配置文件 src/config.ts
打开 src/config.ts 文件，找到 font 配置部分。在这里，添加你的新字体选项：
// 字体配置，这里可以控制你的博客用什么字体font: { zenMaruGothic: { enable: true, // 默认的圆体，你可以选择启用或禁用 }, myAwesomeFont: { enable: false, // 我的超棒字体，默认先禁用，等下我们再启用它！ },},配置说明：
myAwesomeFont: 这里的键名要使用驼峰命名法（camelCase），和你的字体类名对应起来。enable: 这个属性是控制开关，true表示启用，false表示禁用。你可以同时启用多个字体，后面我会讲优先级。
3.2 更新类型定义 src/types/config.ts
为了让 TypeScript 知道你的新配置，我们还需要更新类型定义文件。打开 src/types/config.ts，找到 SiteConfig 类型中的 font 部分，添加你的字体类型定义：
font: { zenMaruGothic: { enable: boolean; // 启用全局圆体 }; myAwesomeFont: { enable: boolean; // 启用我的超棒字体 };};第四步：将字体应用到页面布局
最后一步，我们需要将这个字体类应用到你的博客页面上。打开 src/layouts/Layout.astro 文件，找到 <body> 标签。你会看到一个 class:list 属性，它用来动态添加 CSS 类。在这里，把你的新字体类添加进去：
<body class="min-h-screen" class:list={[ { "lg:is-home": isHomePage, "enable-banner": enableBanner, "zen-maru-gothic-enabled": siteConfig.font.zenMaruGothic.enable, /* 默认圆体 */ "my-awesome-font-enabled": siteConfig.font.myAwesomeFont.enable /* 我的超棒字体 */ }]} data-overlayscrollbars-initialize>这样，当你在 src/config.ts 中启用 myAwesomeFont 时，my-awesome-font-enabled 这个 CSS 类就会被添加到 <body> 标签上，从而应用你的新字体！
第五步：见证奇迹的时刻！
激动人心的时刻到了！
-
启用你的字体：回到
src/config.ts，将myAwesomeFont的enable设置为true。 -
重启开发服务器：在你的终端运行
npm run dev。 -
打开浏览器：刷新你的博客页面，看看是不是已经换上了你心仪的字体！🎉
进阶玩法：让你的字体更完美
字体优先级
如果你同时启用了多个字体，CSS 中后定义的字体类会拥有更高的优先级。这意味着，如果你想让某个字体优先显示，确保它在 src/styles/main.css 中的定义靠后，并且在 Layout.astro 的 class:list 中也靠后。
字体回退机制
在 src/styles/main.css 中定义字体应用类时，我建议你始终添加一些系统字体作为回退。这样，即使你的自定义字体因为某些原因无法加载，页面也不会变成难看的默认字体。
.my-awesome-font-enabled { font-family: 'MyAwesomeFont', 'Helvetica Neue', Arial, sans-serif; /* 后面跟着的都是备用字体 */}字体子集化
如果你的字体文件很大（尤其是中文字体），可以考虑使用字体子集化工具，只保留你博客中会用到的字符。这样可以大大减小字体文件体积，加快页面加载速度。不过这需要一些额外的工具和步骤，这里就不展开了，你可以自行搜索相关教程。
遇到问题？别慌！
如果你的字体没有按预期显示，别担心，这很常见！可以尝试以下方法排查：
- 文件路径：检查
src属性中的字体文件路径是否正确，大小写也要一致。 - 文件格式：确认你的字体文件格式是否正确，并且浏览器支持。
- 浏览器开发者工具：打开浏览器的开发者工具（通常按 F12），查看“网络”选项卡，看看字体文件是否成功加载。同时，在“元素”选项卡中检查
<body>标签的class属性，看my-awesome-font-enabled是否被正确添加。 - CSS 语法：检查
main.css中的@font-face和字体类定义是否有语法错误。 - 重启服务器：有时候，简单的重启开发服务器
npm run dev就能解决问题。 - 清除缓存：浏览器缓存可能会导致旧的样式生效，尝试清除浏览器缓存。
总结
通过以上步骤，你已经成功为你的 Mizuki 博客添加了自定义字体！现在，你的博客不仅内容精彩，连“颜值”也更上一层楼了。快去享受你的个性化博客吧！如果你有任何疑问，欢迎在评论区留言，我们一起交流！🚀
