替换博客网站字体

最近看了Keep主题群里的聊天,想把博客网站的字体替换一下,下面是我操作的步骤和查询的资料。
一、明确Keep主题的配置文件
首先我们需要知道Hexo项目有两个配置文件,一个是站点的配置文件,另一个是Keep主题的配置文件,都是以.yml结尾的文件,两个配置文件的路径如下:
- 站点配置文件:yourhexoblog/_config.yml;
- 主题配置文件:yourhexoblog/source/_data/keep.yml
需要说明的是,我安装的是keep主题,配置文件名称必须修改为keep.yml。
二、准备字体文件
2.1 修改为自定义字体
如果需要修改为自定义字体,需要在yourhexoblog/theme/keep/source/font/webfonts文件夹下添加下载的字体,我使用的是霞鹜文楷,就下载了“LXGWWenKai-Regular.ttf”和“LXGWWenKai-Medium.ttf”两个字体文件;
2.2 修改为内置字体
如果需要修改为内置字体,不需要再fonts文件夹新增字体;
三、修改自定义CSS文件
在yourhexoblog/source/文件夹下新增css文件夹,即yourhexoblog/source/css,在css文件夹内新增custom.css文件,使用文本编辑器打开,输入以下代码:
3.1 使用自定义字体的css文件
1 | :root { |
3.2 使用默认字体的css文件
keep主题的默认字体好像只有fa-regular和fa-solid等几个字体,修改上面的–base-font-family后面的内容即可。
让css生效
使用hexo常用代码,上传到github即可。
1 | hexo clean |
大功告成!
更新:这样好像只修改了网页版的字体,为什么在手机浏览器上就不生效呢?
评论
评论插件加载失败
正在加载评论插件