小文’s blog – WordPress自定义字体

字体实现方式

在CSS中，我们会发现下面的语句（通常在style.css文件内）

font-family: "Microsoft YaHei","WenQuanYi Micro Hei", sans-serif; line-height: 1.8; font-size: 16px; background: #f5f5f5; color: #848484; font-weight: 300; overflow-x: hidden

WordPress一般都是通过修改font-family 属性来改变字体显示效果的

具体实现功能如下

20170107185809

所以我们修改字体就是通过修改第一行的字体类型

今天带来的是如何使用本地字体

教程开始

1.上传字体到本地（部分主题自带有字体，我们直接放到font文件夹里面，如果没有就新建一个文件夹）

20170107190647

2.使用 @font-face定义本地字体

@font-face 能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。【微软的IE 5已经是开始支持这个属性，但是只支持微软自有的.eot (Embedded Open Type) 格式，而其他浏览器直到现在都没有支持这一字体格式。然而，从Safari 3.1开始，网页重构工程师已经可以设置.ttf(TrueType)和.otf(OpenType)两种字体做为自定义字体了。

将以下代码加入到css样式表里面（字体名请自己修改）

@font-face{ font-family:字体名; src:url(fonts/字体名.ttf) format ("truetype"); }

然后就能调用了

3.因此我们打开CSS样式文件，在里面找到body，找到font-family修改成我们需要的字体，这样就完成了wordpress字体设置。

20170107192537

实际上，因为wordpress主题中的CSS样式文件有很大差别，设置也不是这么简单，我们需要找到各处的font-size进行修改。比较标准的wordpress主题都会设置一个body字体样式，然后后面的字体样式都是按比例缩放，因此我们修改完body，然后可以查看博客的显示，如果对某个地方的字体样式不满意，可以点击右键查看网页源代码，找到对应的样式class，然后在css样式文件中进行修改。

本文列举了wordpress字体设置方法，对于html代码一点都不懂的朋友可能修改起来比较困难，因此小文建议最好能够看一些html以及CSS样式相关的书籍，修改起来就非常容易。