[{"data":1,"prerenderedAt":800},["ShallowReactive",2],{"post-/2026/20260418-1":3,"surround-/2026/20260418-1":789},{"id":4,"title":5,"body":6,"categories":758,"date":760,"description":761,"draft":762,"extension":763,"image":764,"meta":765,"navigation":767,"path":768,"permalink":769,"podcastAudio":770,"podcastLyric":771,"podcastTitle":772,"published":769,"readingTime":773,"recommend":778,"references":769,"seo":779,"sitemap":780,"stem":781,"tags":782,"type":787,"updated":760,"__hash__":788},"content/posts/2026/20260418-1.md","在 anheyu-app 后台自定义博客字体",{"type":7,"value":8,"toc":725},"minimark",[9,13,44,64,89,93,99,102,117,120,123,131,149,168,171,253,257,260,265,268,303,307,317,328,332,335,349,372,376,383,390,397,409,415,424,431,438,459,463,466,473,476,479,482,489,492,503,516,519,523,526,547,551,554,560,563,570,574,577,591,595,601,608,611,648,651,681,684,694,697,722],[10,11,5],"h1",{"id":12},"在-anheyu-app-后台自定义博客字体",[14,15,16],"blockquote",{},[17,18,19,20,24,25,28,29,32,33,32,36,39,40,43],"p",{},"这篇教程适合想给 ",[21,22,23],"code",{"code":23},"anheyu-app"," 换字体、但又不想改前端源码的人。我对照了当前 ",[21,26,27],{"code":27},"ckz/anheyu-app-main"," 的后台设置与前台注入逻辑后，整理出一套更稳的做法：直接使用后台现成的 ",[21,30,31],{"code":31},"头部 HTML","、",[21,34,35],{"code":35},"底部 HTML",[21,37,38],{"code":38},"自定义 CSS"," 和 ",[21,41,42],{"code":42},"自定义 JavaScript"," 注入能力来完成字体替换。",[45,46,49,52,59],"alert",{"title":47,"type":48},"当前版本推荐入口","info",[17,50,51],{},"如果你参考的是旧教程，可能会看到“系统设置 -> 页面配置 -> 自定义底部 HTML 代码”这类说法。",[17,53,54,55,58],{},"但从当前 ",[21,56,57],{"code":57},"anheyu-app-main"," 源码里的后台设置表单来看，修改字体更适合走下面这条路径：",[17,60,61],{},[21,62,63],{"code":63},"系统设置 -> 外观配置 -> 页面样式 -> 自定义代码注入 -> 自定义 CSS",[45,65,68],{"title":66,"type":67},"先记住两个原则","warning",[69,70,71,82],"ol",{},[72,73,74,75,77,78,81],"li",{},"改字体优先写在 ",[21,76,38],{"code":38},"，不要把整段 ",[21,79,80],{"code":80},"\u003Cstyle>...\u003C/style>"," 再包一层贴进去。",[72,83,84,85,88],{},"不建议用 ",[21,86,87],{"code":87},"* { font-family: ... !important; }"," 这种一把梭写法，不然很容易把图标字体、特殊组件或代码块也一起改坏。",[90,91,92],"h2",{"id":92},"参考项目",[94,95],"link-card",{"description":96,"icon":97,"link":98,"title":23},"本文思路对应的就是 anheyu-app 当前后台“页面样式 -> 自定义代码注入”这套能力。","https://github.com/favicon.ico","https://github.com/anzhiyu-c/anheyu-app",[90,100,101],{"id":101},"这篇教程能实现什么",[103,104,105,108,111,114],"ul",{},[72,106,107],{},"不改主题源码，直接在后台完成全站字体替换",[72,109,110],{},"支持自托管字体文件，也支持外部字体样式表",[72,112,113],{},"保留代码块的等宽字体，不影响阅读体验",[72,115,116],{},"避开图标字体被覆盖的问题，适合长期使用",[90,118,119],{"id":119},"使用前先准备什么",[17,121,122],{},"在真正操作前，你至少要准备下面两样东西：",[69,124,125,128],{},[72,126,127],{},"一个可公开访问的字体文件地址",[72,129,130],{},"一个确定要显示的字体名称",[17,132,133,134,137,138,141,142,145,146,148],{},"推荐优先使用 ",[21,135,136],{"code":136},"woff2","，其次才是 ",[21,139,140],{"code":140},"woff"," 或 ",[21,143,144],{"code":144},"ttf","。原因很简单：",[21,147,136],{"code":136}," 体积更小、加载更快，更适合博客前台长期使用。",[150,151,154],"folding",{"title":152,":open":153},"字体文件可以从哪里来","true",[103,155,156,159,162,165],{},[72,157,158],{},"你自己的对象存储、图床或 CDN",[72,160,161],{},"博客后台上传后的直链文件",[72,163,164],{},"字体厂商提供的在线样式表或下载链接",[72,166,167],{},"已授权可商用的开源字体项目",[90,169,170],{"id":170},"先理解后台这几个入口的区别",[172,173,174,190],"table",{},[175,176,177],"thead",{},[178,179,180,184,187],"tr",{},[181,182,183],"th",{},"后台字段",[181,185,186],{},"适合做什么",[181,188,189],{},"改字体时怎么用",[191,192,193,217,229,241],"tbody",{},[178,194,195,200,210],{},[196,197,198],"td",{},[21,199,31],{"code":31},[196,201,202,203,32,206,209],{},"插入 ",[21,204,205],{"code":205},"\u003Clink>",[21,207,208],{"code":208},"\u003Cmeta>","、外部样式表或外部脚本",[196,211,212,213,216],{},"当你的字体服务商给的是一段 ",[21,214,215],{"code":215},"\u003Clink rel=\"stylesheet\">"," 时放这里",[178,218,219,223,226],{},[196,220,221],{},[21,222,35],{"code":35},[196,224,225],{},"插入页面底部的 HTML 或脚本",[196,227,228],{},"不作为首选字体入口",[178,230,231,235,238],{},[196,232,233],{},[21,234,38],{"code":38},[196,236,237],{},"写全站 CSS",[196,239,240],{},"改字体的主战场",[178,242,243,247,250],{},[196,244,245],{},[21,246,42],{"code":42},[196,248,249],{},"写全站 JS",[196,251,252],{},"和换字体没直接关系，一般用不上",[90,254,256],{"id":255},"方法一直接用字体文件地址","方法一：直接用字体文件地址",[17,258,259],{},"这是最通用、也最推荐的一种方式。",[261,262,264],"h3",{"id":263},"第一步进入后台设置页","第一步：进入后台设置页",[17,266,267],{},"登录后台后，按下面路径进入：",[69,269,270,276,283,288,294],{},[72,271,272,273],{},"打开 ",[21,274,275],{"code":275},"你的域名/admin",[72,277,278,279],{},"进入 ",[280,281,282],"strong",{},"系统设置",[72,284,272,285],{},[280,286,287],{},"外观配置",[72,289,290,291],{},"点击 ",[280,292,293],{},"页面样式",[72,295,296,297,300,301],{},"找到 ",[280,298,299],{},"自定义代码注入"," 里的 ",[280,302,38],{},[261,304,306],{"id":305},"第二步粘贴下面这段-css","第二步：粘贴下面这段 CSS",[17,308,309,310,312,313,316],{},"把下面的代码直接粘贴到 ",[280,311,38],{}," 里，不要额外包 ",[21,314,315],{"code":315},"\u003Cstyle>"," 标签：",[318,319,326],"pre",{"className":320,"code":322,"filename":323,"language":324,"meta":325},[321],"language-css","@font-face {\n  font-family: \"MyBlogFont\";\n  src: url(\"https://your-cdn.example.com/fonts/my-blog-font.woff2\") format(\"woff2\"),\n       url(\"https://your-cdn.example.com/fonts/my-blog-font.woff\") format(\"woff\");\n  font-display: swap;\n}\n\n:root {\n  --font-sans: \"MyBlogFont\", \"PingFang SC\", \"Hiragino Sans GB\", \"Helvetica Neue\",\n    Helvetica, \"Microsoft YaHei\", \"微软雅黑\", Arial, sans-serif;\n}\n\nbody,\nbutton,\ninput,\ntextarea,\nselect {\n  font-family: var(--font-sans);\n}\n","自定义 CSS 示例","css","",[21,327,322],{"__ignoreMap":325},[261,329,331],{"id":330},"第三步把示例里的内容改成你自己的","第三步：把示例里的内容改成你自己的",[17,333,334],{},"这段代码里真正必须改的只有两类内容：",[103,336,337,343],{},[72,338,339,342],{},[21,340,341],{"code":341},"MyBlogFont","\n把它改成你自己准备使用的字体名称",[72,344,345,348],{},[21,346,347],{"code":347},"https://your-cdn.example.com/...","\n把它改成你自己的字体文件直链",[45,350,352,359],{"title":351,"type":48},"为什么这段写法更稳",[17,353,354,355,358],{},"我对照了当前源码的全局样式，",[21,356,357],{"code":357},"body"," 默认字体本来就是单独声明的，代码块也有自己独立的等宽字体设置。",[17,360,361,362,365,366,39,369,371],{},"所以这里直接改 ",[21,363,364],{"code":364},":root"," 的 ",[21,367,368],{"code":368},"--font-sans",[21,370,357],{"code":357}," / 表单控件字体，通常就够了，不需要粗暴覆盖全站所有元素。",[261,373,375],{"id":374},"第四步保存后刷新前台","第四步：保存后刷新前台",[17,377,378,379,382],{},"点 ",[280,380,381],{},"保存设置"," 后，回到前台刷新页面查看效果。",[17,384,385,386,389],{},"当前源码里的设置保存逻辑会主动刷新前台站点配置，所以多数情况下保存后就能看到变化；如果你浏览器缓存比较强，手动再按一次 ",[21,387,388],{"code":388},"Ctrl + F5"," 会更稳。",[90,391,393,394,396],{"id":392},"方法二字体服务商给你的是-link-代码","方法二：字体服务商给你的是 ",[21,395,205],{"code":205}," 代码",[17,398,399,400,402,403,405,406,408],{},"有些字体平台不会直接给你 ",[21,401,136],{"code":136}," 文件链接，而是给一段在线样式表代码。这种时候不要往 ",[21,404,38],{"code":38}," 里硬塞 ",[21,407,205],{"code":205},"，正确做法是分成两步。",[261,410,412,413],{"id":411},"第一步把字体样式表放到-头部-html","第一步：把字体样式表放到 ",[21,414,31],{"code":31},[318,416,422],{"className":417,"code":419,"filename":420,"language":421,"meta":325},[418],"language-html","\u003Clink rel=\"stylesheet\" href=\"https://your-font-provider.example.com/my-font.css\">\n","头部 HTML 示例","html",[21,423,419],{"__ignoreMap":325},[261,425,427,428,430],{"id":426},"第二步在-自定义-css-里声明使用它","第二步：在 ",[21,429,38],{"code":38}," 里声明使用它",[318,432,436],{"className":433,"code":434,"filename":435,"language":324,"meta":325},[321],":root {\n  --font-sans: \"MyBlogFont\", \"PingFang SC\", \"Hiragino Sans GB\", \"Helvetica Neue\",\n    Helvetica, \"Microsoft YaHei\", \"微软雅黑\", Arial, sans-serif;\n}\n\nbody,\nbutton,\ninput,\ntextarea,\nselect {\n  font-family: var(--font-sans);\n}\n","搭配头部 HTML 的 CSS",[21,437,434],{"__ignoreMap":325},[45,439,441,453],{"title":440,"type":67},"不要把职责写反了",[103,442,443,448],{},[72,444,445,447],{},[21,446,31],{"code":31}," 负责“引进来”",[72,449,450,452],{},[21,451,38],{"code":38}," 负责“用起来”",[17,454,455,456,458],{},"如果你把整段 ",[21,457,205],{"code":205}," 塞进 CSS 编辑框，前台当然不会生效。",[90,460,462],{"id":461},"只想改标题不想改正文怎么办","只想改标题，不想改正文怎么办",[17,464,465],{},"如果你只想把站点标题、文章标题和各级标题换成另一种字体，正文仍然保持系统默认字体，可以这样写：",[318,467,471],{"className":468,"code":469,"filename":470,"language":324,"meta":325},[321],"@font-face {\n  font-family: \"MyHeadingFont\";\n  src: url(\"https://your-cdn.example.com/fonts/my-heading-font.woff2\") format(\"woff2\");\n  font-display: swap;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-family: \"MyHeadingFont\", \"PingFang SC\", \"Microsoft YaHei\", sans-serif;\n}\n","只改标题字体",[21,472,469],{"__ignoreMap":325},[17,474,475],{},"如果你觉得只有标题还不够，也可以把站点名、卡片标题等文字再一起补进去。但第一次修改时，建议先从标题开始，确认效果没问题后再继续扩大范围。",[90,477,478],{"id":478},"不推荐的写法",[17,480,481],{},"下面这种写法看上去很省事，实际上最容易埋坑：",[318,483,487],{"className":484,"code":485,"filename":486,"language":324,"meta":325},[321],"* {\n  font-family: \"MyBlogFont\" !important;\n}\n","不推荐",[21,488,485],{"__ignoreMap":325},[17,490,491],{},"不推荐它的原因主要有三点：",[103,493,494,497,500],{},[72,495,496],{},"容易误伤图标字体",[72,498,499],{},"容易把代码块、按钮、输入框、插件组件全部一锅端",[72,501,502],{},"后面一旦要排查某个局部样式为什么异常，会很难收拾",[17,504,505,506,508,509,511,512,515],{},"更稳的思路永远是：改 ",[21,507,357],{"code":357},"、改 ",[21,510,368],{"code":368},"、按需补标题和表单控件，而不是直接 ",[21,513,514],{"code":514},"*"," 全覆盖。",[90,517,518],{"id":518},"常见问题",[261,520,522],{"id":521},"_1-保存了但前台没变化","1. 保存了，但前台没变化",[17,524,525],{},"优先检查下面几项：",[103,527,528,531,537,540],{},[72,529,530],{},"字体文件链接能不能在浏览器里直接打开",[72,532,533,534],{},"字体文件有没有 ",[21,535,536],{"code":536},"404",[72,538,539],{},"是否命中了浏览器缓存",[72,541,542,543,546],{},"字体名称 ",[21,544,545],{"code":545},"font-family"," 是否和你声明的名字完全一致",[261,548,550],{"id":549},"_2-只有你自己电脑上生效别人看不到","2. 只有你自己电脑上生效，别人看不到",[17,552,553],{},"这通常是因为你只写了：",[318,555,558],{"className":556,"code":557,"language":324,"meta":325},[321],"body {\n  font-family: \"某个本地字体\";\n}\n",[21,559,557],{"__ignoreMap":325},[17,561,562],{},"如果访客电脑里没有安装这款字体，浏览器就会自动回退到别的字体。",[17,564,565,566,569],{},"想让所有访客都看到同样效果，就要配合 ",[21,567,568],{"code":568},"@font-face"," 或在线字体样式表一起用。",[261,571,573],{"id":572},"_3-字体加载失败或控制台报跨域错误","3. 字体加载失败或控制台报跨域错误",[17,575,576],{},"这通常是字体源站的问题，不是博客主题的问题。你需要检查：",[103,578,579,582,585,588],{},[72,580,581],{},"字体文件是不是公开可访问",[72,583,584],{},"对象存储 / CDN 是否允许跨域读取",[72,586,587],{},"返回的 MIME 类型是否正确",[72,589,590],{},"字体路径里有没有中文空格或特殊字符",[261,592,594],{"id":593},"_4-改完以后图标显示异常","4. 改完以后图标显示异常",[17,596,597,598,600],{},"大多数情况是因为你用了 ",[21,599,514],{"code":514}," 全局覆盖，或者错误地把图标相关元素也强行改成了文本字体。",[17,602,603,604,607],{},"如果你按本文推荐的 ",[21,605,606],{"code":606},":root + body + 表单控件"," 方式写，一般不会遇到这个问题。",[90,609,610],{"id":610},"范围补充",[45,612,614,620,642],{"title":613,"type":48},"本文说的是全站字体修改",[17,615,616,617,619],{},"当前 ",[21,618,57],{"code":57}," 的后台里：",[103,621,622,630,636],{},[72,623,624,626,627],{},[21,625,293],{"code":293}," 这块提供的是全站级 ",[21,628,629],{"code":629},"头部 HTML / 底部 HTML / 自定义 CSS / 自定义 JavaScript",[72,631,632,633],{},"自定义页面编辑器另外也有页面级 ",[21,634,635],{"code":635},"自定义 CSS / 自定义 JS",[72,637,638,639],{},"文章编辑侧边栏目前更明确暴露的是 ",[21,640,641],{"code":641},"单文章自定义 JS",[17,643,644,645,647],{},"所以如果你的目标是“整个博客统一换字体”，最合适的还是本文这一套全站 ",[21,646,38],{"code":38}," 方案。",[90,649,650],{"id":650},"进阶建议",[150,652,654],{"title":653},"想更讲究一点，可以继续做这几步",[69,655,656,665,675,678],{},[72,657,658,659,661,662,664],{},"先用 ",[21,660,136],{"code":136},"，再按需补一个 ",[21,663,140],{"code":140}," 作为兼容兜底。",[72,666,667,668,670,671,674],{},"给 ",[21,669,568],{"code":568}," 加上 ",[21,672,673],{"code":673},"font-display: swap","，避免字体下载时出现长时间空白。",[72,676,677],{},"中文字体体积通常很大，能做子集化就尽量做子集化。",[72,679,680],{},"如果只是标题想更有风格，正文尽量保持易读字体，不要两者一起太花。",[90,682,683],{"id":683},"总结",[17,685,686,687,689,690,693],{},"如果你现在用的是新版 ",[21,688,23],{"code":23},"，那么“改博客字体”这件事最稳的做法，不是改前端源码，而是直接在后台的 ",[280,691,692],{},"系统设置 -> 外观配置 -> 页面样式 -> 自定义代码注入"," 里完成。",[17,695,696],{},"简单说就是：",[103,698,699,705,716],{},[72,700,701,702],{},"有字体文件，就用 ",[21,703,704],{"code":704},"@font-face + 自定义 CSS",[72,706,707,708,710,711,713,714],{},"只有外部 ",[21,709,205],{"code":205},"，就放到 ",[21,712,31],{"code":31}," 再配合 ",[21,715,38],{"code":38},[72,717,718,719,721],{},"不要用 ",[21,720,87],{"code":87}," 这种大锤式写法",[17,723,724],{},"照这个思路改，基本就能把博客字体换掉，而且后续维护也轻松很多。",{"title":325,"searchDepth":726,"depth":726,"links":727},4,[728,730,731,732,733,740,747,748,749,755,756,757],{"id":92,"depth":729,"text":92},2,{"id":101,"depth":729,"text":101},{"id":119,"depth":729,"text":119},{"id":170,"depth":729,"text":170},{"id":255,"depth":729,"text":256,"children":734},[735,737,738,739],{"id":263,"depth":736,"text":264},3,{"id":305,"depth":736,"text":306},{"id":330,"depth":736,"text":331},{"id":374,"depth":736,"text":375},{"id":392,"depth":729,"text":741,"children":742},"方法二：字体服务商给你的是 \u003Clink> 代码",[743,745],{"id":411,"depth":736,"text":744},"第一步：把字体样式表放到 头部 HTML",{"id":426,"depth":736,"text":746},"第二步：在 自定义 CSS 里声明使用它",{"id":461,"depth":729,"text":462},{"id":478,"depth":729,"text":478},{"id":518,"depth":729,"text":518,"children":750},[751,752,753,754],{"id":521,"depth":736,"text":522},{"id":549,"depth":736,"text":550},{"id":572,"depth":736,"text":573},{"id":593,"depth":736,"text":594},{"id":610,"depth":729,"text":610},{"id":650,"depth":729,"text":650},{"id":683,"depth":729,"text":683},[759],"博客美化","2026-04-18 23:15:57","这篇文章记录如何在 anheyu-app 后台通过自定义 CSS 与头部 HTML 安全修改全站字体",false,"md","https://dev.jiugg.top/i/c821ac0b-f928-475e-9cbc-6310c2cc2e2e.webp",{"slots":766},{},true,"/2026/20260418-1",null,"https://cdn.jiugg.top/boke/2026/在+Anheyu-app+后台换字体.mp3","https://cdn.jiugg.top/boke/2026/在+Anheyu-app+后台换字体.lrc","AI播客",{"text":774,"minutes":775,"time":776,"words":777},"10 min read",9.81,588600,1962,5,{"title":5,"description":761},{"loc":768},"posts/2026/20260418-1",[783,23,784,785,786],"anheyu","字体修改","自定义CSS","后台教程","tech","X_liRzuWnKKtKbmo9FG9z2OPzUU3Jh1d0gI7gi2yu6A",[790,795],{"title":791,"path":792,"stem":793,"date":794,"type":787,"children":-1},"在 Anheyu 博客中接入 Live2D 看板娘","/2026/20260323-1","posts/2026/20260323-1","2026-03-23 18:04:13",{"title":796,"path":797,"stem":798,"date":799,"type":787,"children":-1},"在 anheyu-app 给页脚添加动物装饰","/2026/20260419-1","posts/2026/20260419-1","2026-04-19 15:57:11",1780745884890]