标点符(钱魏 Way)

网页文本替换技术

做网站设计的时候,常常会遇到想在页面上显示某一字体,但是由于网站用户电脑里没有里某有相应的字体而烦恼。一般会想到的是用图片替换文字。而今天要说的是一个让用户即使电脑里没有那种字体还能自己显示的方法。

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了。

从中我们可以看出来,使用Typeface只需要着简单的几步就可以在页面中使用嵌进字体了。

typeface资源:

下载配置好的字体(该页面可以包含一个字体生成器)

查看typeface演示

jQuery 插件

cufon

cufon是一个比较新的技术,是一个很好的sIFR替换方案,它的特点:被浏览器原生支持无需浏览器插件;兼容各个主流浏览器;无需配置;快速渲染大量字体。

cufon的原理:

cufon通过生成器将字体文件转化为SVG字体,再将其转换为VML文件,这对IE很重要,由于IE原生支持VML文件。最后,使用复杂的JavaScript函数将VML文件编码为JSON文件(typeface的原理与此类似)。如下图所示:

cufon

这样做有很多好处:加载一个字体文件,只需要加载一些js文件就可以;客户端无需再次手工编码;外部js文件直到加载完成才会被执行,这可以让我们实现无闪烁的干净的替换。压缩率高。相对于字体文件,可压缩掉60-80% 。

cufon的用法:cufon的用法与typeface类似,需要加载一个库文件和字体文件。而与typeface不同的是,你需要使用js初始化cufon:

这与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,下载

可以使用的样式如下:

IE中的样式如下:

这是目前最简单实现嵌进字体的方法。

码字很辛苦,转载请注明来自标点符《网页文本替换技术》

评论

  1. rekung #1

    其实cufon是可以选择文字生成JS,不必整个字库都嵌入页面,我实验过中文字体的选择性加载
    http://hi.baidu.com/rekung/blog/item/d9e1facb62b4028bc81768ee.html

    回复
    2010-07-22