最近浏览别人博客的时候,发现别人博客的字体很好看,于是也开始折腾起更换博客的字体。我的博客英文使用的字体是sail这款免费字体,官网: https://www.fontsquirrel.com/fonts/sail?q%5Bterm%5D=sail&q%5Bsearch_check%5D=Y

方法一

fontsquirrel这个平台还提供了字体文件转换功能,先去下载页下载好相应字体的OTF文件,然后点该网站的generator菜单,进入字体转换界面

把刚才下载的字体上传上去,然后fontsquirrel这个网站会将该字体转换成网页字体的格式woff/woff2 。将提供的压缩包下载下来,解压然后将里面的woffwoff2格式的字体文件上传到你的web目录下,然后再编辑解压后文件夹里的fonts.css ,复制到记事本,将里面的src地址更改为你字体在web服务器上的目录,如下

# 例子
@font-face {
    font-family: 'sailregular';
    src: url('https://blog.hibobmaster.com/font/sail-regular-webfont.woff2') format('woff2'),
         url('https://blog.hibobmaster.com/font/sail-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
# 用了CDN的话
@font-face {
    font-family: 'sailregular';
    src: url('//cdn.hibobmaster.com/font/sail-regular-webfont.woff2') format('woff2'),
         url('//cdn.hibobmaster.com/font/sail-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

接着申明该字体,你可以随便取个名字,然后可以参考如下配置并修改

}
.super-font{
	font-family:"sailregular";
	font-size:40px;font-style:normal;
	-webkit-font-smoothing: antialiased;
	-webkit-text-stoke-width: 0.2px;
	-moz-osx-font-smoothing: grayscale;
}

最后自定义你的主题,把上述代码一起添加到额外的css类中,下次要使用这个字体时调用就可以了。

比如你要更改文章标题的字体,可以输入< i class="super-font">The way to change font in WordPress</i>,然后预览就可以发现字体改变了。

用浏览器的审查元素功能,查看你想修改的部分的层叠样式表,这里以文章目录为例(原来的font-family是默认字体我已经改过了)

ftp工具把上述层叠样式表下载下来,然后搜索 toc_container a (搜索其它的也行只要能定向到那个地方),然后把更改font-family为你字体的名称,保存然后上传就好(最好先备份)

注:如果使用了CDN由于缓存的缘故,可能过几个小时才会有效果

方法二

通过插件来实现,下载字体,可以兼容更多的浏览器类型,同时有额外的功能

OMGF | Host Google Fonts Locally

Daan van den Bergh
With only 2 clicks of a button, OMGF automagically downloads your Google Fonts you want to WordPress' content-folder, generates a stylesheet for …
Plugin Stats
10,000+ active installs
2.5+ version
5.3+ tested up to

该插件可以直接从谷歌font下载字体(国内服务器也可以),然后会将字体存在本地(一般会有四种格式),eot格式兼容IE9 ,truetype格式兼容Safari, Android, iOS

接下来的操作和方法一类似,在额外的css类中添加上述字体的配置信息同时申明一下就好。

参考文档:


BobMaster

天地之间有杆秤,那秤砣是老百姓

发表评论

电子邮件地址不会被公开。 必填项已用*标注

我不是机器人*