IT兄弟连 HTML5教程 CSS3属性特效 自定义文字

字体使用是网页设计中不可或缺的一部分。经常地，我们希望在网页中使用某一特定字体，但是该字体并非主流操作系统的内置字体，这样用户在浏览页面的时候就有可能看不到真实的设计。美工设计师最常做的办法是把想要的文字做成图片，这样做有几个明显缺陷：

Ø　不可能大范围的使用该字体；

Ø　图片内容相对使用文字不易修改；

Ø　不利于网站SEO（主流搜索引擎不会将图片alt内容作为判断网页内容相关性的有效因素）。

网络上有一些使用sIFR技术、或javascript/flash hack的方法，但实现起来或繁琐，或有缺陷。下面要讲的是如何只通过CSS的@font-face属性来实现在网页中嵌入任意字体。

（1）第一步

获取要使用字体的三种文件格式，确保能在主流浏览器中都能正常显示该字体。

▪  TTF或.OTF，适用于Firefox 3.5、Safari、Opera

▪  EOT，适用于Internet Explorer 4.0+

▪  SVG，适用于Chrome、iPhone

下面要解决的是如何获取到某种字体的这三种格式文件。一般地，我们在手头上（或在设计资源站点已经找到）有该字体的某种格式文件，最常见的是.TTF文件，我们需要通过这种文件格式转换为其余两种文件格式。字体文件格式的转换可以通过网站FontsQuirrel或onlinefontconverter提供的在线字体转换服务获取。这里推荐第一个站点，它允许我们选择需要的字符生成字体文件（在服务的最后一个选项），这样就大大缩减了字体文件的大小，使得本方案更具实用性。字体声明如下：

（1）第一步

下载一种字体到本地后引入该字体，为该字体命名

（2）第二步

在页面中需要的地方使用该字体：

下面的例子是对上述步骤的具体实施，也是自定义文字进行进一步的说明，方便读者理解及使用自定义文字。这里我们在网上下载了“hanyi.ttf”的字体，因为该字体不是系统字体，所以我们不能直接使用“font-family”的方法为网页设置该字体。这时候就需要使用CSS3自定义文字的方法来使用该字体，我们为该文字命名为“itxdl”后就可以用“font-family”方法来导入该字体了。代码如下：

使用chrome浏览器直接打开这个文件，就可以看到浏览器对这个网页文件解释后的结果。通过CSS3自定义文字的设置，我们可以看到网页上字体已经变成“hanyi.ttf”的字体样式了。如图1所示：

图1  使用自定义文字

使用这个方法我们就可以为自己的页面设置我们想要的个性化文字了。是不是很激动，想要为自己的网站跃跃欲试你早就看好了的文字呢，那就赶紧试试吧。