简单几步更换主题全局字体,让博客变的更可爱
一、下载字体
好像是废话,尽量别用方正等字体,小心收到邮件
二、字体转换
一般网上下载的都是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;