[CSS3]使用font-face为页面自定义字体

特地在网上直搜“自定义页面字体”、“wordpress自定义字体”,发现完全没有这方面的教程。因为老早之前就想给某些特定的位置使用个性字体。一时不会变通,而且当时觉得大部分字体文件也比较大,所以也没有继续寻找解决办法。

今天无聊又来折腾这个功能,看了一下自己的CSS,页面是有字体图标的,我看它的引用方式时觉得可以照搬,于是找到了@font-face。

@font-face的是一个CSS规则,允许你输入自己的字体出现在网站上,即使在特定的字体在访问者的计算机上没有安装。这条规则最重要的是,它为设计师打开了一个全新的世界。您可以使用任何你喜欢的字体。

目前大多数WP站都是用的是“微软雅黑”吧?如果你想使用个性一些的字体,而又担心用户电脑上没有这些字体,那就必须把字体上传到你的服务器然后使用CSS的@font-face来引用。

方法

字体文件的格式类型大多数为truetype,后缀为ttf、ttc和otf,这里我以造字工房悦黑细体.otf为例,先下载这个字体,然后把它放在wp主题目录的font文件夹,你也可以放在主题根目录,待会用相对路径来引用。

CSS

例子:引用字体(库)可以参照字体图标的方式,如下,

@font-face{font-style:normal;font-family:'造字工房悦黑细体';src:url('font/造字工房悦黑细体.otf') format('truetype');}
.post-title{color:#555;font-size:16px;font-family:"造字工房悦黑细体","Microsoft YaHei","Roboto",sans-serif;font-weight:bold;}

这样post-title这个类所显示的字体就将会是“造字工房悦黑细体”。如下图:
2014-12-19_font-face

特别说明:上面已经强调,引用自定义的字体文件一般会比较大,大多数在1~2M左右,有可能会影响页面的加载速度,所以如果不是非常想个性化某些字体,最好还是不要使用。



微信扫描下方的二维码阅读本文

赞(0)