简单几步更换主题全局字体,让博客变的更可爱

一、下载字体

好像是废话,尽量别用方正等字体,小心收到邮件

二、字体转换

一般网上下载的都是ttf的字体格式,推荐用字客网转换一下字体格式,格式推荐woff和woff2

三、上传字体

以Handsome主题为例,路径是 /usr/themes/handsome/assets/fonts,然后新建一个文件夹,

比如 wawa,然后把字体改个名字,这里也按照我的字体为例,font-wawa.woff

四、替换字体

找到 /usr/themes/handsome/assets/css/features/font.min.css

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url('../../fonts/sourcesanspro/sourcesanspro-light.woff') format('woff');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url('../../fonts/sourcesanspro/sourcesanspro.woff') format('woff');
}

修改为自己的字体,也可以把原先的注释掉,方便以后换回去

@font-face {
  font-family: 'wawa';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('wawa'), local('wawa'), url('../../fonts/wawa/font-wawa.woff') format('woff');
}
@font-face {
  font-family: 'wawa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('wawa'), local('wawa'), url('../../fonts/wawa/font-wawa.woff') format('woff');
}

当然字体路径也可以使用CDN地址,推荐github使用jsdelivr加速

五、替换font-family

找到路径 /usr/themes/handsome/assets/css/handsome.min.css,找到body中的 font-family

直接搜索 font-family

body{font-family:"Source Sans Pro","Hiragino Sans GB","Microsoft Yahei",SimSun,Helvetica,Arial,Sans-serif,monospace;

第一处修改为自己的字体名称

body{font-family:"wawa","Hiragino Sans GB","Microsoft Yahei",SimSun,Helvetica,Arial,Sans-serif,monospace;

大功告成!

库啵!