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

 

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

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

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

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

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

（1）第一步

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

▪  TTF或.OTF，适用于Firefox 3.五、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  使用自定义文字

 

使用这个方法咱们就能够为本身的页面设置咱们想要的个性化文字了。是否是很激动，想要为本身的网站跃跃欲试你早就看好了的文字呢，那就赶忙试试吧。