Write life in words...

WordPress如何修改并自定义前台字体

Mar 13, 2019

WordPress如何修改并自定义前台字体,这篇博文是应博友要求而写的教程,尽量写得简单易懂些,其实这样的教程也有很多,写得不明白的也可以在评论里提出来,其实修改网站字体是件非常容易的事情。那么先说说目前应用在网页上常用的有哪些字体吧!

怎么应用字体文件

不需要自定义的常用字体一般有微软雅黑、黑体、Arial、Tahoma、Georgia等等,本博客在自定义字体之前就是使用的Georgia字体,特别是英文效果还是不错的;那么一般情况下我们修改字体,只需要在网站style.css里修改相应的font-family:代码段就可以了;比如现在我的个人博客是这样的:font-family: "SourceHanSans", "Helvetica Neue", "Arial", "Hiragino Sans GB", "Noto Sans CJK SC", "Heiti SC", "Microsoft YaHei", "WenQuanYi Microhei", sans-serif;而位于第一时间加载的字体:SourceHanSans,就是已经自定义修改过的字体。

以上大致就是怎么去应用字体文件的方法,搞清楚怎么通过样式表文件style.css去应用字体,那么你就学会了第一步。

下载喜欢的字体文件

然后就是学会下载各式各样的字体文件了,网络上常见的字体文件格式是:.ttf的,而一般会用4个不同的字体格式来增强浏览器的渲染,一般网站字体会有TTF,WOFF,WOFF2,SVG等格式,它们分别对应不同的渲染方式。

比如我现在的博客使用的是:冬青黑体简体中文W3字体,那么第一步就是到各类字体网去下载这款字体,我选择的是站长素材网提供的字体,下载步骤比较简单,这一步略过。注意:一般下载好的格式为TTF的,这里需要用到免费字体格式转换器去转换其他的3个格式文件。

在样式表文件里声明调用字体文件

这一步对于WordPress如何修改并自定义前台字体来说是非常重要的一步,下载好字体文件并转换好格式后备用,然后进行现在这一步。

这里以SourceHanSans字体为例,在style.css中加入如下代码:

@font-face {
font-family: ‘SourceHanSans’;
src: url(‘SourceHanSans.eot’);
src: url(‘SourceHanSans.eot?#iefix’) format(’embedded-opentype’),
url(‘SourceHanSans.woff’) format(‘woff’),
url(‘SourceHanSans.ttf’) format(‘truetype’),
url(‘SourceHanSans.svg#CygnetRoundRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

注意:以上字段里的字体文件命名一定要和字体文件相对应。

上传字体文件到对应的目录

由于在style.css里我们写的字体调用路径为相对路径,所以这里我们只需要上传字体文件到跟style.css一样的目录即可,然后Ctrl+F5强制刷新一下网页吧!恭喜你,WordPress前台字体修改自定义成功。