• 你要看一个国家的文明, 只需考察三件事: 第一看他们怎样待小孩子; 第二看他们怎样待女人; 第三看他们怎样利用闲暇的时间@胡适 (思想家)

改变wordpress字体的方法

programming BobMaster 697次浏览 2021字 0个评论
文章目录[显示]
这篇文章在 2020年10月07日16:54:34 更新了哦~

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

方法一

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

Demonstration1

把刚才下载的字体上传上去,然后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;
}

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

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

i.super-font{
	font-family:"sailregular";
	font-size:25px;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>或者在段落的高级-›额外的CSS类中写上super-font,然后预览就可以发现字体改变了。

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

Demonstration2

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

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

方法二

安装一款插件Orbit Fox,这款插件在编辑器中添加了好几种强大的功能增强区块

我们要使用的是这款插件提供的Advanced Heading区块

效果演示

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book

参考文档:


文章版权归原作者所有 | 本站默认采用 CC-BY-NC-SA 4.0协议进行授权|
转载请务必注明原作者及本文原始地址:
https://blog.hibobmaster.com/the-way-to-change-font-in-wordpress/
喜欢 (0)
分享:-)
关于作者:
人生如音乐,欢乐且自由
发表我的评论(代码和日志请使用Pastebin或Gist)
取消评论

                       

去你妹的实名制!

  • 昵称 (必填)
  • 邮箱 (必填,不要邮件提醒可以随便写)
  • 网址 (选填)