在 anheyu-app 后台自定义博客字体

这篇教程适合想给 anheyu-app 换字体、但又不想改前端源码的人。我对照了当前 ckz/anheyu-app-main 的后台设置与前台注入逻辑后，整理出一套更稳的做法：直接使用后台现成的 头部 HTML、底部 HTML、自定义 CSS 和 自定义 JavaScript 注入能力来完成字体替换。

当前版本推荐入口

如果你参考的是旧教程，可能会看到“系统设置 -> 页面配置 -> 自定义底部 HTML 代码”这类说法。

但从当前 anheyu-app-main 源码里的后台设置表单来看，修改字体更适合走下面这条路径：

系统设置 -> 外观配置 -> 页面样式 -> 自定义代码注入 -> 自定义 CSS

先记住两个原则

改字体优先写在 自定义 CSS，不要把整段 <style>...</style> 再包一层贴进去。
不建议用 * { font-family: ... !important; } 这种一把梭写法，不然很容易把图标字体、特殊组件或代码块也一起改坏。

参考项目

anheyu-app

本文思路对应的就是 anheyu-app 当前后台“页面样式 -> 自定义代码注入”这套能力。

这篇教程能实现什么

不改主题源码，直接在后台完成全站字体替换
支持自托管字体文件，也支持外部字体样式表
保留代码块的等宽字体，不影响阅读体验
避开图标字体被覆盖的问题，适合长期使用

使用前先准备什么

在真正操作前，你至少要准备下面两样东西：

一个可公开访问的字体文件地址
一个确定要显示的字体名称

推荐优先使用 woff2，其次才是 woff 或 ttf。原因很简单：woff2 体积更小、加载更快，更适合博客前台长期使用。

字体文件可以从哪里来

你自己的对象存储、图床或 CDN
博客后台上传后的直链文件
字体厂商提供的在线样式表或下载链接
已授权可商用的开源字体项目

先理解后台这几个入口的区别

后台字段	适合做什么	改字体时怎么用
`头部 HTML`	插入 `<link>`、`<meta>`、外部样式表或外部脚本	当你的字体服务商给的是一段 `<link rel="stylesheet">` 时放这里
`底部 HTML`	插入页面底部的 HTML 或脚本	不作为首选字体入口
`自定义 CSS`	写全站 CSS	改字体的主战场
`自定义 JavaScript`	写全站 JS	和换字体没直接关系，一般用不上

方法一：直接用字体文件地址

这是最通用、也最推荐的一种方式。

第一步：进入后台设置页

登录后台后，按下面路径进入：

打开 你的域名/admin
进入 系统设置
打开 外观配置
点击 页面样式
找到 自定义代码注入 里的 自定义 CSS

第二步：粘贴下面这段 CSS

把下面的代码直接粘贴到 自定义 CSS 里，不要额外包 <style> 标签：

自定义 CSS 示例css

@font-face {
  font-family: "MyBlogFont";
  src: url("https://your-cdn.example.com/fonts/my-blog-font.woff2") format("woff2"),
       url("https://your-cdn.example.com/fonts/my-blog-font.woff") format("woff");
  font-display: swap;
}

:root {
  --font-sans: "MyBlogFont", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue",
    Helvetica, "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

body,
button,
input,
textarea,
select {
  font-family: var(--font-sans);
}

第三步：把示例里的内容改成你自己的

这段代码里真正必须改的只有两类内容：

MyBlogFont 把它改成你自己准备使用的字体名称
https://your-cdn.example.com/... 把它改成你自己的字体文件直链

为什么这段写法更稳

我对照了当前源码的全局样式，body 默认字体本来就是单独声明的，代码块也有自己独立的等宽字体设置。

所以这里直接改 :root 的 --font-sans 和 body / 表单控件字体，通常就够了，不需要粗暴覆盖全站所有元素。

第四步：保存后刷新前台

点 保存设置 后，回到前台刷新页面查看效果。

当前源码里的设置保存逻辑会主动刷新前台站点配置，所以多数情况下保存后就能看到变化；如果你浏览器缓存比较强，手动再按一次 Ctrl + F5 会更稳。

方法二：字体服务商给你的是 `<link>` 代码

有些字体平台不会直接给你 woff2 文件链接，而是给一段在线样式表代码。这种时候不要往 自定义 CSS 里硬塞 <link>，正确做法是分成两步。

第一步：把字体样式表放到 `头部 HTML`

头部 HTML 示例html

<link rel="stylesheet" href="https://your-font-provider.example.com/my-font.css">

第二步：在 `自定义 CSS` 里声明使用它

搭配头部 HTML 的 CSScss

:root {
  --font-sans: "MyBlogFont", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue",
    Helvetica, "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

body,
button,
input,
textarea,
select {
  font-family: var(--font-sans);
}

不要把职责写反了

头部 HTML 负责“引进来”
自定义 CSS 负责“用起来”

如果你把整段 <link> 塞进 CSS 编辑框，前台当然不会生效。

只想改标题，不想改正文怎么办

如果你只想把站点标题、文章标题和各级标题换成另一种字体，正文仍然保持系统默认字体，可以这样写：

只改标题字体css

@font-face {
  font-family: "MyHeadingFont";
  src: url("https://your-cdn.example.com/fonts/my-heading-font.woff2") format("woff2");
  font-display: swap;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "MyHeadingFont", "PingFang SC", "Microsoft YaHei", sans-serif;
}

如果你觉得只有标题还不够，也可以把站点名、卡片标题等文字再一起补进去。但第一次修改时，建议先从标题开始，确认效果没问题后再继续扩大范围。

不推荐的写法

下面这种写法看上去很省事，实际上最容易埋坑：

不推荐css

* {
  font-family: "MyBlogFont" !important;
}

不推荐它的原因主要有三点：

容易误伤图标字体
容易把代码块、按钮、输入框、插件组件全部一锅端
后面一旦要排查某个局部样式为什么异常，会很难收拾

更稳的思路永远是：改 body、改 --font-sans、按需补标题和表单控件，而不是直接 * 全覆盖。

常见问题

1. 保存了，但前台没变化

优先检查下面几项：

字体文件链接能不能在浏览器里直接打开
字体文件有没有 404
是否命中了浏览器缓存
字体名称 font-family 是否和你声明的名字完全一致

2. 只有你自己电脑上生效，别人看不到

这通常是因为你只写了：

css

body {
  font-family: "某个本地字体";
}

如果访客电脑里没有安装这款字体，浏览器就会自动回退到别的字体。

想让所有访客都看到同样效果，就要配合 @font-face 或在线字体样式表一起用。

3. 字体加载失败或控制台报跨域错误

这通常是字体源站的问题，不是博客主题的问题。你需要检查：

字体文件是不是公开可访问
对象存储 / CDN 是否允许跨域读取
返回的 MIME 类型是否正确
字体路径里有没有中文空格或特殊字符

4. 改完以后图标显示异常

大多数情况是因为你用了 * 全局覆盖，或者错误地把图标相关元素也强行改成了文本字体。

如果你按本文推荐的 :root + body + 表单控件 方式写，一般不会遇到这个问题。

范围补充

本文说的是全站字体修改

当前 anheyu-app-main 的后台里：

页面样式 这块提供的是全站级 头部 HTML / 底部 HTML / 自定义 CSS / 自定义 JavaScript
自定义页面编辑器另外也有页面级 自定义 CSS / 自定义 JS
文章编辑侧边栏目前更明确暴露的是 单文章自定义 JS

所以如果你的目标是“整个博客统一换字体”，最合适的还是本文这一套全站 自定义 CSS 方案。

进阶建议

想更讲究一点，可以继续做这几步

先用 woff2，再按需补一个 woff 作为兼容兜底。
给 @font-face 加上 font-display: swap，避免字体下载时出现长时间空白。
中文字体体积通常很大，能做子集化就尽量做子集化。
如果只是标题想更有风格，正文尽量保持易读字体，不要两者一起太花。

总结

如果你现在用的是新版 anheyu-app，那么“改博客字体”这件事最稳的做法，不是改前端源码，而是直接在后台的 系统设置 -> 外观配置 -> 页面样式 -> 自定义代码注入 里完成。

简单说就是：

有字体文件，就用 @font-face + 自定义 CSS
只有外部 <link>，就放到 头部 HTML 再配合 自定义 CSS
不要用 * { font-family: ... !important; } 这种大锤式写法

照这个思路改，基本就能把博客字体换掉，而且后续维护也轻松很多。

在 anheyu-app 后台自定义博客字体

在 anheyu-app 后台自定义博客字体

评论区