网页中使用特殊字体（1）

在网站开发过程中,经常会遇到一些特殊字体,这些特殊字体在客户端未安装该字体时会无法正常显示,一般情况下,如果一个网站使用的特殊字体较少,而且都是静态的话,可以直接切为图片,当网站中用到的特殊字体较多,而且许多是动态的话,切图片的方法显然不可行,下面介绍几种处理网站特殊字体的方法.

一. 使用Google Web Fonts

Google字体库里也有很多时尚和个性化的字体供你选择，并且由于是开源字库，所以不管是商业或者个人，Google Font API都适用。Google Font API并不依赖于JavaScript，因此即使用户禁用了JavaScript，Google字体依然可以显示。Google字体在CSS3中的表现同样出色，任何额外的样式都可以被添加，比如CSS 3中的text-shadow属性.使用这种方法的前提是Google字体库里有你需要的字体,具体使用方法如下:

1. 进入Google Web Fonts查找你需要的字体,然后点击"加入收藏(Add to Collection)"

2. 打开收藏集,点击"使用(Use)"

3. 进入使用页面后,会有详细的使用说明,其中嵌入页面的方法有三种,我们一般选第一种最常规的用法,就是直接在页面头部引入

<link href='' rel='stylesheet' type='text/css'>

4. 然后就可以直接在样式文件中直接字义字体了

h1 { font-family: 'Berkshire Swash', cursive;}

实现效果如下:

二. 使用CSS3 @font-face

@font-face是CSS3中的一个模块， 能够加载服务器端的字体文件，可以在网页中嵌入客户端没有安装的字体。具体使用方法可以参考CSS3 @font-face 使用方法

三. 使用Cufon渲染

Cufon 是一个用来替代 sIFR 框架，实现在网页中对文字字体进行渲染功能的纯 JavaScript 开源类库(cufon-yui.js)。

Cufon 技术的实现策略其实就是以一定标准，在网页相关位置上“画”出了所需要显示的文字字符，并同时替换原先区域所需要显示的文字。借助于浏览器所推出的专有页面绘画方案，如 VML、Canvas 和 SVG 等，来进行页面的绘画。

使用这种方法首先要下载特殊字体文件,以便用来生成JavaScript字体件,下面详细介绍下使用方法:

1. 引入Cufon核心类库cufon-yui.js,可以在Cufon官网下载

2. 在Cufon官网上传特殊字体文件并生成相应的JavaScript字体件

<script src="cufon-yui.js" type="text/javascript">script>
<script src="YourFont.font.js" type="text/javascript">script>

3. 在JS中使用Cufon.replace(selector[, options])方法替换特殊字体，selector类似CSS选择器，详细用法参见Cufon API

Cufon.replace('h1');
Cufon.replace('#cufon', {fontFamily:'YourFont', fontSize:'36px', color:'#ff0000'});

更详细的使用步骤可以参见https://github.com/sorccu/cufon/wiki/Usage