在网页中使用特殊字体的几种方式

 
Js/Css/jQuery

方式1: Google Font API

 

因为IE目前只支持 eot 字体(Embed OpenType), 而TTF字体被Firefox / Opera / Chrome / Safari支持。 Google Font API 实际上是通过判断浏览器类型来返回相应的类型字体, 通过CCS3的 @font-face 来达到嵌入效果。Google Font API具体的用法参见这里：http://code.google.com/apis/webfonts/docs/getting_started.html

 

目前Google Font API支持的字体非常有限,列表在此 http://code.google.com/webfonts

 

如果字体无法在此列表中找到，你可以用相同的原理来实现

1. 首先找到此字体的ttf文件

2. 在 http://www.kirsle.net/wizards/ttf2eot.cgi 转换成 eot文件

3. 在你的CSS中分别引入eot 和 ttf

 

 

这种方式目前兼容 IE6/7/8 , Opera 10+, Firefox 3.5+, Google Chrome 4.0+, Safari

 

优点：适合SEO 适合英文字体 灵活

缺点：中文字体动辄几M，以目前的网络环境还不实用

 

 

 

方式2: Flash替换法

 

Flash的flash.text.TextField 是支持内嵌字体的。这种方式比较有名的是 http://www.mikeindustries.com/blog/sifr

通过Javascript搜索页面上特定的HTML标记，(比如<h1>),将文字元素替换成 Flash,并设置指定字体

 

优点：适合SEO, 任何支持Flash的浏览器都可兼容

缺点：此Flash会根据字体内容的多少而动态调整Flash, 在UI设计上增加了很多难度。特别是对换行之类的处理。

         内嵌一个支持中文的swf 一般要几M, 以目前的网络环境来说加载速度很慢

 

 

 

方式3： 直接将文字做成图片

 

可以将页面上特殊字体的部分做成图片，不过这种方式不利于SEO,而且对于网站全球化非常麻烦

 

 

 

方式4： 浏览器客户端动态替换图片

 

通过Javascript搜索页面上特定的HTML标记，(比如<h1>), 想服务器发送AJAX请求，动态地生成这段文字使用某种字体的图片，最后客户端JS将此HTML标记替换成 img.  此类的代表是 http://facelift.mawhorter.net/

 

优点：适合SEO, 适合大字库字体（如中文）

缺点：对服务器压力稍大

有话要说