Web字体（链接）嵌入

下面是我最近在学习的两种字体嵌入方法

1、@font-face

使用@font-face可以这样做：

@font-face{

font-family:"Garamod Premier Pro";

src:url(fonts/GaramondPremrPro.otf);

}

然后，按我们已经习惯的做法引用font-family:

h1{

font-family:"Garamod Premier Pro",serif;

}

这样，就可以在网站设计中使用你拥有的字体啦。

但是，事情其实那么简单，@font-face存在着几个缺点。（1）浏览器支持问题，一些低版本浏览器并不支持@font-face,IE6只支持.eot(EmbeddedOpenType)格式。（2）字体文件存诸在网站上，允许公共访问，很容易被下载和非法使用；许多产商的最终用户许可协议还没有更新以允许字体链接。这使得字体开发商和字体销售商非常担心Web上的字体链接。

2、Cufon

利用Cufon可以用所选的字体显示HTMl,而不需要使用任何图像或@font-face。

使用Cufon的过程如下：

（1）到Cufon网站下载Cufon脚本文件。

（2）使用Cufon生成器上传所选的字体。

Cufon生成器部分截图如下：

（3）在文档头中，添加对Cufon脚本和生成器提供的字体脚本的引用，比如：

<script src="js/cufon-yui.js"></script>

<script src="js/Museo_400.font.js"></script>

还应该在body结束标签前添加以下代码，以避免在IE中出现闪烁问题：

<script>Cufon.now();</script>

另外，还应该在文档开头指定哪些HTML元素或选择器应该替换为你的字体，比如：

<script>

Cufon.replace('h1');

</script>

或

<script>

    Cufon.replace('h1')('h2')('blockquote');

</script>

（4）如果在使用Cufon的网站上使用jQuery等JavaScript框架，Cufon会利用框架的选择器引擎，因此可以指定特有的选择器，比如：

<script>

    Cufon.replace('#header h2,#header ul a');

</script>

（5）在css文件中，按与其他文本相同的方式，修改由Cufon替换的文本的样式——例如：color:#333;、font-size:12px;、text-transform:uppercase;等。

这样就可以啦。（注意，在许可协议方面Cufon与@font-face面对相同的问题——所选文字的EULA必须允许在Web上进行字体嵌入。）

巴特西

Web字体（链接）嵌入

最新文章

热门文章