替换博客网站字体
RainNot 炉火纯青

最近看了Keep主题群里的聊天,想把博客网站的字体替换一下,下面是我操作的步骤和查询的资料。

一、明确Keep主题的配置文件

首先我们需要知道Hexo项目有两个配置文件,一个是站点的配置文件,另一个是Keep主题的配置文件,都是以.yml结尾的文件,两个配置文件的路径如下:

  1. 站点配置文件:yourhexoblog/_config.yml;
  2. 主题配置文件: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
2
3
4
:root {
--base-font-size: 16px; #修改全局默认字体大小
--base-font-family: LXGWWenKai-Regular,LXGWWenKai-Medium; #修改全局默认字体,这里填刚才放入fonts文件夹的两个字体名称
}

3.2 使用默认字体的css文件

keep主题的默认字体好像只有fa-regular和fa-solid等几个字体,修改上面的–base-font-family后面的内容即可。

让css生效

使用hexo常用代码,上传到github即可。

1
2
3
hexo clean
hexo g
hexo d

大功告成!

更新:这样好像只修改了网页版的字体,为什么在手机浏览器上就不生效呢?

 评论
评论插件加载失败
正在加载评论插件
由 Hexo 驱动 & 主题 Keep
本站由 提供部署服务
总字数 8.5k 访客数 访问量