由于最初选的博客主题有一些功能上的不满,还有一个小bug,不得不放弃该主题,那个主题我第一眼看到就觉得很不错,后来再也没有找到与之相符的主题。选择一番之后,更新到了现在的主题ztopic,但是这里面的字体跟我预想中的还是有些差异,遂对此主题进行一些小改动。

​ 更换字体有两个要点,一是要找到源代码中存放字体的文件和位置,二是选择到自己心仪的字体。

​ 说到找到存放字体的文件,由于每个主题的结构不是完全相同的,跟字体相关的文件的写法和位置也不一定一样。那么要怎么快速定位到源文件呢?首先我们在原来的博客界面检查文字字体,可以看到这里的段落的字体如下图所示:

1572869928305

此时我并不能完全确定这个字体就是文中段落的字体,所以我将其中一个字体稍微修改,文中也的确生效了,那么可以确定这个就是我需要修改的字体。

选择其中第一个字体”Montserrat”检索一下,可以看到有三个文件包含这个结果:

1572870256048

这其中的css文件是运行hexo generate生成的,第三个scss文件就是源代码。打开相应的代码可以看到这个字体是包含在变量”$global-font-family”之中的:

1572870452299

这里其实已经是我更换后的字体了,我初始查找的时候其实是用的图1中的一整套font-family,对应到现在就是”Montserrat”, “Noto Serif SC”, sans-serif,在我写这篇文章的时候发现这样做并不可靠,因为在浏览器中这些字体显示的是双引号,而在代码中我不知不觉将他们改成了双引号。

回到正题,我检索到这个文件之后大概摸索了一下这几个变量,同样的,修改一下其中的一个字体,刷新自己的博客后字体生效了,那么这个”$global-font-family”就是文章相关字体。

现在更换我们需要的字体,由于windows自带字体并不是很多,我们可以到网上寻找一些自己喜欢的字体。这里我是在google font上浏览了一番,发现Noto系列的字体还不错,同时在搜寻字体的过程中发现了一个下载字体的网站google-webfonts-helper,这个网站不像前者需要科学上网,相比前者只是不能同时预览多种字体。源文件里是使用@font-face的方法引用的字体,这个方法不懂的话大概查一下就知道了,看了下google webfonts helper的实例,正好就是@font-size,所以将字体下载下来预计就ok了。

1572872036230

这里要注意,第一项中默认的字符集是latin,由于我寻找的中文字符集,所以需要将选项修改为chinese-simplified,再将原latin去掉

1572872228423

下载完之后将对应的woff文件放到相应的font文件夹中,再使用@font-face定义,最后在变量中引用,就可以了。

这里的三个字体分别是我的英文字符集,简体中文字符集和字体族名:

1572872430572