安知鱼主题更改字体
求助
最近网站换成了自建Umami统计访客信息,但是为啥还会跳转到不良网站啊~
复现方式:
使用浏览器,百度搜索 Peter267;
进入网站,则可能会跳转到赌博网站。
如果您知道原因,欢迎使用邮箱联系wujingbo12@qq.com,我将感激不尽!
正文
不知道各位有没注意到,本站在上个月将字体换成了霞鹜文楷屏幕阅读版,个人感觉非常漂亮。
本篇文章,我来讲解安知鱼主题更改字体的两个方法。当然,如果你不是安知鱼主题但拥有选择网站字体和Inject功能,那么也能使用本教程。
本文全部以LXGW WenKai Screen(霞鹜文楷屏幕阅读版)为例进行演示,请替换成自己需要的字体!
方案一
此方案适合后缀为.ttf/.otf/.woff/woff2 等没有分包的字体文件。
我更加推荐方案二。
创建CSS文件
在博客的source/static目录(/static/目录你可以换成其他的,但必须是/source/目录下)下新建一个font.css文件,在文件中写入下方内容。
1
2
3
4
5
6
7
@font-face{
font-family: 'LXGW WenKai Screen';
<!-- 其中LXGW WenKai Screen是引入的字体的名称,可以自定义 -->
font-display: swap;
src: url('/ttf/LXGWWenKaiScreen.ttf') format("truetype");
<!-- url中填写自己的字体地址,我使用的是本地文件夹所以用的是相对路径,如果是外部引用的话在其中写入链接地址就好了 -->
}
引入CSS文件
在 themes\anzhiyu 中找到_config.yml文件,找到下列设置项。
1
2
3
4
5
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
head:
在head下引入CSS文件。
1
2
3
4
inject:
head:
# 字体
- <link rel="stylesheet" href="/static/font.css" media="defer" onload="this.media='all'">
注意:将/static/font.css换成自己实际的地址。
更改字体
在在 themes\anzhiyu 中找到_config.yml文件的Global font settings。
1
2
3
4
5
6
7
8
9
10
11
12
13
# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
global-font-size: 16px
code-font-size:
font-family:
code-font-family: consolas, Menlo, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif
# Font settings for the site title and site subtitle
# 左上角网站名字 主页居中网站名字
blog_title_font:
font_link:
font-family:
将两个font-family都改成'LXGW WenKai Screen'。
1
2
3
4
5
6
7
8
9
10
11
12
13
# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
global-font-size: 16px
code-font-size:
font-family: 'LXGW WenKai Screen'
code-font-family: consolas, Menlo, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif
# Font settings for the site title and site subtitle
# 左上角网站名字 主页居中网站名字
blog_title_font:
font_link:
font-family: 'LXGW WenKai Screen'
'LXGW WenKai Screen'要改成你在font.css中设置的字体名称。
字体的修改已经全部完成,hexo三连后即可看到效果。
方案二
本方案适合字体文件后缀为.css的分包后的字体文件。分包能使你网站字体加载速度显著提升。如果你的字体没有分包,可以使用下方网站进行分包后上传到自己的CDN上。
引用站外地址
在线字体分包器
免费帮助你将字体部署到网站上 - 来自中文网字计划
引入CSS
详细做法上文已经说明,这里不再赘述。
在head下引入CSS文件
1
2
3
4
inject:
head:
# 字体(css文件地址换成你自己的)
- <link rel="stylesheet" href="https://chinese-fonts-cdn.deno.dev/packages/lywkpmydb/dist/LXGWWenKaiScreen/result.css">
这里我使用的是中文网字计划提供的免费CDN,在这里推荐给大家!
引用站外地址
中文网字计划
一套开源的、全方位的、全场景的 Web 字体解决方案。
这个项目里提供非常多的开源免费字体的托管服务,且速度较快,大家可以放心使用。
更改字体
详细做法上文已经说明,这里仅说明字体名称问题。
如果你是使用中文网字计划的字体,则在我标黄位置就可以看到字体名称。
如果你使用的是其他字体,遗憾的是,我也不知道如何查看。目前已知可能可行的方法是你把css文件链接发给AI,他就会告诉你名称。
把两个font-family改为AI告诉你的名称,记得加单引号。
大功告成
本篇文章分享了两种更换字体的方案。方案一借鉴了其他博主的经验,方案二是我个人的探索成果。值得一提的是,方案二的字体文件适用性更广、加载更快,与当前多数网站的方案一致,推荐给你。
此外,关于是否要写博客一周年纪念文章,我还在犹豫。主要担心自己的文笔不够好,如果最终与大家见面,很可能是一篇“AI代写”的拙作😅。
参考文章
引用站外地址
anzhiyu主题自定义博客字体
前尘小筑