纯代码设置WordPress自定义字体

本站的WordPress采用的国外的GeneratePress主题,其对中文字体的支持并不完美,而且某些情况也会调用Google的字体库,导致连接慢,影响到页面的载入时间。例如莫名其妙的调用Roboto字体又莫名其妙的恢复的过程https://www.iappi.cn/2019_05/2019737.html中记录的折腾。所以一直对字体没有怎么调整,担心改动了之后出现什么新问题。

图1.GeneratePress 主题默认情况下的中文

但是字体还是非常重要的,直接影响到页面的展示,于是还是想着在不更改主题的前提下,增加几个常见的字体,方便编辑文档的时候采用。

百度了一下,首先想到的是中文字体的在线托管或者说引用在线的字库。毕竟中文字体比英文字体最大的区别就是常见的汉字有几千个,扩展后的汉字有几万个。往往一个字体就几兆几十兆的大小。如果使用全部的完整的字库,那别说有CDN了,这速度也是难以保证的,而且CDN也是要钱的,不是免费。那就看看在线字库,当前做的比较好的就是有字库(https://www.webfont.com/)了,字体在线引用,嵌入css/js代码即可,兼容主流的浏览器。但是有字库免费服务中存在诸多的限制,购买VIP的话价格不菲。一年下来需要480元,虽然每月有50W的PV支持,但实际上我们小小网站根本没有那么高的流量的。

图2.有字库VIP服务价格

此路不通,那还有一路,就是使用代码调用系统默认的一些字体,这样就不存在没有字体不能显示等情况,也无需从网络上下载相应的字体。按现在Win7+Win10的占有率,系统默认的字体基本不用担心无法显示的问题了。相应的代码如下:

function add_editor_buttons($buttons) {
$buttons[] = 'styleselect';
$buttons[] = 'fontselect';
return $buttons;
}
add_filter("mce_buttons_3", "add_editor_buttons");

function add_fontfamily($initArray){
$initArray['font_formats'] = "微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Arial='Arial';";
return $initArray;
}
add_filter('tiny_mce_before_init', 'add_fontfamily');

这里引用了最常见的微软雅黑、宋体、黑体、楷体等系统默认的字体,如果需要调用其他字体,按模版添加即可。然后将此代码加入主题的functions.php文件,或者使用其他方式进行调用。

重新刷新下后台编辑页面,发现代码已经生效了。字体可以设置整个段落,也可以单独设置,这样比GeneratePress主题默认的字体设定就方便的多了。

图3.设置自定义字体的选择框
图4.设置自定义字体为楷体
图5.楷体设置成功后前台显示

可以看到字体的设定是已经生效的,下次有时间再看看去掉这次加入的代码是否会影响到之前自定义字体。