@font-face和其他字体替换方案

漂亮的字体，是设计师的法宝，但是在 WEB 设计中，这一法宝几乎失效，某种自定义字体往往因为用户的电脑中没有预制该字体而无法以想要的方式呈现。本文将提供一些关于此问题的解决方案，在权衡利弊之后，相信总有一款适合运用于你的项目中。

使用图像替换

这是一种最为常见的方式，我们常常把设计图中自定义字体的部分切成图片，然后在页面中引用该图片，或者在 CSS 中通过背景图的方式，将图片嵌入到某个元素中。

h1{

    width : 200px;

    height : 50px;

    background : url(logo.png) no-repeat;

}

这种方式非常快速简单，并且具有很好的浏览器兼容性，但是它的缺点也非常突出，它无法被重用，难以维护，当图像使用得过多时，还会严重地影响到页面的加载速度。

@font-face

@font-face 是 W3C CSS Fonts Module的一部分，它允许开发者在页面中使用自定义字体，而无论用户的计算机中是否已安装了这种字体。定义和使用一个字体的语法非常简单：

@font-face {  

	font-family : dolmen;  

	src : local("dolmen"), 

	url(dolmen.ttf); 

}

body{

    font-family : dolmen

}

font-family : 定义一个字体名字，以便在以后使用。
src : 使用 url 定义字体文件的远程路径，或者使用 local 定义用户计算机中的字体名。

下面一行文本就是使用这种技术的例子：

Hello @font-face

@font-face 在所有的现代浏览器中都得到了支持，微软甚至早在 IE 4 的时代就开始使用这项技术，但是不同的浏览器支持的字体类型却有所差异，IE 之外的浏览器都支持 TrueType 和 OpenType 字体类型，而 IE 则只支持 Embedded OpenType 类型，所以上面的例子在 IE 中不会有任何特别的地方。从 Firefox 3.6 开始，新增加了对 WOFF 字体的支持。

sIFR

sIFR是非常有名的一款字体替换组件，它使用 Flash 来替换页面上的文本，并通过 JavaScript 来控制。下面是一段使用 sIFR 定义字体，并使用自定义字体替换页面中 H1 元素文本的示例代码：

var cochin = {

  src: 'cochin.swf'

};



sIFR.activate(cochin);



sIFR.replace(cochin, {

  selector: 'h1'

});

众所周知的，Flash 对浏览器的开销非常惊人，尽管 sIFR 的开发人员已经尽可能地优化导出的 Flash，但是仍然不推荐使用这种技术在页面中替换太多的内容，通常替换 5 个以内的标题被认为是合理的，超出这个范围，页面性能大幅下降，可能让用户难以忍受。

Typeface.js

虽然名声远远不如 sIFR ，但是 Typeface似乎有更好的前景，它不再使用 Flash，而是采用 JavaScript 绘制矢量图形的方式来替换文本。它的使用同样简单：

<script src="typeface-0.14.js"></script>

<script src="helvetiker_regular.typeface.js"></script>



<div class="typeface-js" style="font-family: Helvetiker">

	Text here in Helvetiker font...

</div>

Typeface.js 广泛地支持各种浏览器，并且在性能上更加出色，但是在 IE 6/7 中，矢量图形的绘制性能比较差，使用 Typeface.js 时，仍然需要有所节制。