在网站开发过程中,经常会遇到一些特殊字体,这些特殊字体在客户端未安装该字体时会无法正常显示,一般情况下,如果一个网站使用的特殊字体较少,而且都是静态的话,可以直接切为图片,当网站中用到的特殊字体较多,而且许多是动态的话,切图片的方法显然不可行,下面介绍几种处理网站特殊字体的方法.
一. 使用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='http://fonts.googleapis.com/css?family=Berkshire+Swash' 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
浏览器支持情况
| Cufon | IE（≥ 5） Firefox（≥ 1.5）Opera（≥ 9.5）Safari（≥ 3）Google Chrome（≥ 1.0） |
| @font-face | IE（≥ 4，仅支持 OpenType）Firefox（≥ 3.5） Opera（≥ 10.0） Safari（≥ 3.1） |