站点图标 小文's blog

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

字体实现方式

在CSS中,我们会发现下面的语句(通常在style.css文件内)

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

具体实现功能如下

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

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

教程开始

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

 

 

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

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

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

然后就能调用了

 

 

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

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

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

 

退出移动版