做网站设计的时候，常常会遇到想在页面上显示某一字体，但是由于网站用户电脑里没有里某有相应的字体而烦恼。一般会想到的是用图片替换文字。而今天要说的是一个让用户即使电脑里没有那种字体还能自己显示的方法。
sIFR
通过sIFR你可以任意定义WEB中的文本字体，即便是客户端浏览器未安装的字体。sIFR使用Flash渲染字体效果，可以平滑消除文本锯齿，你可以像使用用CSS控制文本一样轻松得到各种文本效果。
参考网站：
sIFR :http://www.mikeindustries.com/blog/sifr/
sIFR 3 :http://novemberborn.net/sifr3
sIFR 字体生成工具：http://www.sifrgenerator.com/wizard.html
Typeface
Typeface被以为是替换SIFR的最佳方案，相对于sIFR，Typeface少了Flash的应用，使用纯JS来嵌进相关字体，而且用法也很简单：在页面中引进相应的js文件就OK了。
<html>
<head>
<!-- 加载所有的样式先 -->
<link rel="stylesheet" type="text/css" ref="/style.css">
<!-- 再加载typeface.js 库文件和typeface.js字体文件-->
<script src="typeface-0.13.js"></script>
<script src="helvetiker_regular.typeface.js"></script>
</head>
<body>
<!-- 继续并使用CSS指定typeface.js 字体 -->
<div style="font-family: Helvetiker">文本文本...</div>
</body>
</html>
从中我们可以看出来，使用Typeface只需要着简单的几步就可以在页面中使用嵌进字体了。
typeface资源：
cufon
cufon是一个比较新的技术，是一个很好的sIFR替换方案，它的特点：被浏览器原生支持无需浏览器插件；兼容各个主流浏览器；无需配置；快速渲染大量字体。
cufon的原理：
cufon通过生成器将字体文件转化为SVG字体，再将其转换为VML文件，这对IE很重要，由于IE原生支持VML文件。最后，使用复杂的JavaScript函数将VML文件编码为JSON文件（typeface的原理与此类似）。如下图所示：
这样做有很多好处：加载一个字体文件，只需要加载一些js文件就可以；客户端无需再次手工编码；外部js文件直到加载完成才会被执行，这可以让我们实现无闪烁的干净的替换。压缩率高。相对于字体文件，可压缩掉60-80% 。
cufon的用法：cufon的用法与typeface类似，需要加载一个库文件和字体文件。而与typeface不同的是，你需要使用js初始化cufon：
<script type="text/javascript">Cufón.replace('h2', { fontFamily: 'Qlassik Medium' }); </script>
这与typeface的在样式中定义字体很不一样。
cufon资源：cufon项目、cufon演示、cufon生成器、wp-cufon 一个使用cufon的wordpress插件。
cufon和typeface.js对比：
| Cufón | Typeface.js | |
|---|---|---|
| 文件大小 | 14.0kb (压缩后) | 16.3kb (未压缩) |
| 支持的浏览器 | Firefox 1.5+, Safari 3+, Opera 9.5+, Google Chrome 和 Internet Explorer6+ | Firefox 1.5+, Safari 2+, and Internet Explorer 6+, 最新版已经支持IE8 |
| 支持的字体类型 | .ttf, .otf, PFB, postscript | .ttf |
| 支持的字体样式 | font-size, font-style, font-weight, line-height, text-shadow, color | font-size, font-style, font-weight, font-stretch, letter-spacing, line-height |
| 可选文字? | 尚不支持 | 尚不支持 |
从这个对比中可以看出来，两者并没有太大的不同，cufon支持更多的浏览器和字体类型，而typeface支持更多的字体样式。实际应用中貌似typeface方便一些，可以直接在样式中定义字体，而cufon则有总体文件大小方面的上风。具体用哪一个，看你自己的喜好吧。
@font-face
CSS3的@font-face属性（事实上CSS2中就已引进），到现在为止，已经有Safari、Chrome、Opera 10和Firefox 3.5支持@font-face了。IE系浏览器不支持TTF格式的字体，只支持eof格式，不过，微软官方发布了一个WEFT工具，可以将TTF转化为EOF，下载。
可以使用的样式如下：
@font-face { font-family: qianduanNet; font-style: normal; font-weight: 400; src: url("SketchRockwell.ttf"); }
.fontFace{ font-family: qianduanNet; font-size: 3.2em; letter-spacing: 1px; text-align: center; }
IE中的样式如下：
@font-face { font-family: Goudy Stout; font-style: normal; font-weight: 400; src: url(GOUDYST0.eot); }
这是目前最简单实现嵌进字体的方法。
1422
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
