wordpress自定义字体:让用户能显示

2012/09/19

在设计我们的wordpress主题时,为了更强的表现主题的风格,需要使用自定义字体,这个所谓的自定义字体实际上可能用户的电脑里没有的。怎么办?下面我们将展示如何自定义字体。

一、一般显示字体的方法

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

[php]
#site-title a {font-family:宋体;}
[/php]

通过font-family告诉ID为site-title的链接字体为宋体。

二、显示自定义字体的方法

现在我们不想显示宋体,而是显示“方正综艺简体”,是不是直接把“宋体”改为“方正综艺简体”呢?如果用户的电脑里碰巧安装了这种字体,就能够正确显示。但是不是所有的用户都安装了这种字体。所以直接修改的方法是行不通的。故我们需要寻找另一种方法。

  1. 下载“方正综艺简体”
  2. 使用 @font-face

在主题文件夹中(假设dianjin123)建立一个fonts文件夹,然后把你下载的字体放进去,根据你的需要,下载若干种字体。

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

现在在你的样式文件里写@font-face:

[php]
@font-face{
font-family:方正综艺简体;
src:url(‘/www/wp-content/themes/dianjin123/fonts/方正综艺简体.ttf’) format ("truetype");
}
[/php]
现在可以使用:
[php]
#site-title a {font-family:方正综艺简体;}
[/php]

 

2 thoughts on “wordpress自定义字体:让用户能显示

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注