朱琛的小屋

Hexo博客之改字体

觉得自己的博客字体不好看,在网上找了半天也没有相应的资料,所以这一次我们来看看杂么改掉自己Hexo博客的字体。

首先找到自己字体和字体大小的文件。
字体在/themes/hexo-theme-next/source/css/_variables下的custom.styl(这个是NexT主题的目录,其他主题请按图索骥)。
字体大小在/themes/hexo-theme-next/source/css/_variables下的base.styl

然后我们来看怎么改动。
custom.styl文件:

$font-family-headings = Georgia, sans // 标题,修改成你期望的字体族
$font-family-base = "Microsoft YaHei", Verdana, sans-serif // 修改成你期望的字体族

我们可以看出来第一个字体变量是题目的字体,第二个是其余部分的字体。
因为我们是中文博客,所以肯定希望能改成一些比较漂亮的中文字体,但是显而易见,你改成宋体是不合理的,因为第一会出现乱码情况,第二Hexo也不接受中文名字的字体。所以我们需要使用中文字体的英文名称。下面是中文字体对应的英文名称。

新细明体:PMingLiU 
细明体:MingLiU 
标楷体:DFKai-SB 
黑体:SimHei 
宋体:SimSun 
新宋体:NSimSun 
仿宋:FangSong 
楷体:KaiTi 
仿宋_GB2312:FangSong_GB2312 
楷体_GB2312:KaiTi_GB2312 
微软正黑体:Microsoft JhengHei 
微软雅黑体:Microsoft YaHei 

装Office会多出来的一些字体: 
隶书:LiSu 
幼圆:YouYuan 
华文细黑:STXihei 
华文楷体:STKaiti 
华文宋体:STSong 
华文中宋:STZhongsong 
华文仿宋:STFangsong 
方正舒体:FZShuTi 
方正姚体:FZYaoti 
华文彩云:STCaiyun 
华文琥珀:STHupo 
华文隶书:STLiti 
华文行楷:STXingkai 
华文新魏:STXinwei 

苹果电脑中的字体: 
华文细黑:STHeiti Light [STXihei] 
华文黑体:STHeiti 
华文楷体:STKaiti 
华文宋体:STSong 
华文仿宋:STFangsong 
丽黑 Pro:LiHei Pro Medium 
丽宋 Pro:LiSong Pro Light 
标楷体:BiauKai 
苹果丽中黑:Apple LiGothic Medium 
苹果丽细宋:Apple LiSung Light 

我们只要将自己喜欢字体的英文名加到这两个变量的第一个前面就可以了,有多个字体是为了预防在某些场合前面的字体出现异常,后面的字体可以替代一下。下面是我的定义。

$font-family-headings = KaiTi,"Microsoft YaHei",Georgia, sans // 标题,修改成你期望的字体族
$font-family-base = SimHei, Verdana, sans-serif // 修改成你期望的字体族

至于字体大小,我们在前面提到的base.styl里面61行左右会看见如下定义

// Font size
$font-size-base           = 18px
$font-size-small          = $font-size-base - 2px
$font-size-smaller        = $font-size-base - 4px
$font-size-large          = $font-size-base + 4px

// Headings font size
$font-size-headings-base  = 28px
$font-size-headings-step  = 2px

同理,第一个部分$font-size-base是除了标题外的其余部分大小,第二个部分$font-size-headings-base是标题大小,你改动成你希望的大小就可以了。

朱琛 wechat
扫一扫,用手机看更方便~
坚持原创技术分享,您的支持将鼓励我继续创作!