关于几种文本替换技术－CSS3, sIFR, Typeface.js, cufon

July 31, 2010 by SLJ | Category:HTML/CSS, Javascript | 6 Comments Font size: AA AA

在现今的开发中，客户对页面中字体的显示效果越来越重视，尤其是标题文字。以往采用的方法是使用静态图片，但因为图片中文字不是动态的，采用一种新的方式尤为重要，下面是4种文字替代技术。

方案一：@font-face (CSS3样式)

CSS3的@font-face属性（事实上CSS2中就已引入），为我们带来了一些希望，而Firefox 3.5新增的对@font-face的支持，让我们离这个希望更进了一些。

到现在为止，已经有Safari、Chrome、Opera 10和Firefox 3.5支持@font-face了，比较意外的是，IE系列浏览器也部分支持该属性。Mozilla旗下的其它产品，SeaMonkey 2 和Thunderbird 3 也支持该属性。

浏览器	最低版本	支持字体
Internet Explorer	4.0	只支持OpenType字体(eof格式)
Firefox (Gecko)	3.5 (1.9.1)	TrueType(ttf格式)和OpenType 字体
Opera	10.0	TrueType和OpenType 字体
Safari (WebKit)	3.1 (525)	TrueType和OpenType 字体

从表中可以看出，IE系浏览器不支持TTF格式的字体，只支持eof格式，不过，微软官方发布了一个WEFT工具，可以将TTF转化为EOF，需要的朋友可以去下载使用。

可以使用的样式如下：

@font-face　{
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
  local("HelveticaNeue-Bold"),
  url(MgOpenModernaBold.ttf);
  font-weight: bold;
  font-style:　normal;
}
.fontFace{
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
  local("HelveticaNeue-Bold"),
  url(MgOpenModernaBold.ttf);
  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);
}

相关链接：

https://developer.mozilla.org/index.php?title=En/CSS/%40font-face

Web fonts with @font-face :http://www.css3.info/preview/web-fonts-with-font-face/

方案二：sIFR (Scalable Inman Flash Replacement)

sIFR并非一种新技术，而是已经存在并被使用很多年了。sIFR是一种很有用也很好用的文本替换技术，通过Flash+JS+CSS将网络字体嵌入到页面中。

sIFR 是一种用Flash替换页面中文本元素的技术。
sIFR利用了Flash的dynamic text和character embedded这个功能实现。

关于sIFR的一些事实：

sIFR不需要更改(X)HTML代码，所有的工作由Javascript、Flash和CSS来完成；
如果用户没有安装Flash或者不支持Javascript，那么(X)HTML的文本就会被CSS样式化后显示出来。
sIFR是可缩放的，可以在渲染时更改为用户设置的缺省字体尺寸。
sIFR兼容所有的屏幕阅读机，至今还没有问题被报道出来。
sIFR的文本可以被鼠标选择，尽管当全选文本时，选中的状态看上去不那么确切。
sIFR不影响搜索引擎的定位和评定，不会隐藏真实的文本内容。

在链接上使用sIFR

最新版本的sIFR允许链接文本被替换。但可能造成以下的可访问性问题：

不支持浏览器的右键点击功能（上下文菜单）
不支持apple的option键
没有状态条信息

使用步骤：

包含所需的js和css:

<link rel="stylesheet" href="all.css" type="text/css" media="all" />
<link rel="stylesheet" href="sIFR-screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="sIFR-print.css" type="text/css" media="print" />
<script src="sifr.js" type="text/javascript"></script>
<script src="sifr-addons.js" type="text/javascript"></script>

执行代码:

<script type="text/javascript">
//<![CDATA[
if(typeof sIFR == "function"){
// 建议用这种格式
    sIFR.replaceElement(named({sSelector:"body h1", sFlashSrc:"vandenkeere.swf", sColor:"#000000", sLinkColor:"#000000", sBgColor:"#FFFFFF", sHoverColor:"#CCCCCC", nPaddingTop:20, nPaddingBottom:20, sFlashVars:"textalign=center&offsetTop=6"}));
// 这种格式也可以，但参数的顺序就必须按照指定的顺序写，没有的参数用null表示。
    sIFR.replaceElement("h5#pullquote", "vandenkeere.swf", "#000000", "#000000", "#FFFFFF", "#FFFFFF", 0, 0, 0, 0);
    sIFR.replaceElement("h3", "tradegothic.swf", "#000000", null, null, null, 0, 0, 0, 0, null);
};
//]]>
</script>

sIFR.replaceElement函数的参数

sSelector
CSS selector ，使用这个选择器选择需要替换的文本元素。支持的选择器包括 ID选择器（#）,子代选择器（>）和类选择器（.）。多个选择器可以用逗号隔开。如：“body h1″，“h5#pullquote”，“h3.sidebox”，“h3″等等。
sFlashSrc
嵌入字符的swf文件的位置。
sColor
文本颜色。如 (#000000).
sLinkColor
链接的文本颜色
sHoverColor
hovered links的颜色.
sBgColor
背景色。
nPaddingTop
上部填充。单位pixels, 但不要写 px部分。
nPaddingRight
右填充
nPaddingBottom
底部填充
nPaddingLeft
左填充
sFlashVars
传递给Flash的参数。参数间用&分隔。如下可以使用下面这些参数： textalign=center: 水平居中 offsetLeft=5: 距离左边5px offsetTop=5: 距离上边5px underline=true: 对hover的链接添加下划线
sCase
等于upper可以变成大写；等于lower 转换成小写。
sWmode
将该参数设置成 transparent ，可以使背景透明。如果希望元素叠放在Flash上，则应设置成opaque

总结

sIFR并不会和图片替换技术相竞争；它是针对不同工作的独特的工具。它能被最好的使用在那些显示为浏览器缺省字体大小的，而又不能替换为自建图片的文本上。
sIFR理想的使用场合是，当你想要仅用一张图片就显示自定义的字体或者反锯齿的标题时。这在web上被非常频繁的使用，在这些案例中sIFR是一个更好的选择。它可以缩放为用户缺省的字体尺寸，可以被选择，可以使用在数以千计的页面上而只需要下载一两个文件。

摘要

在页面标题上使用sIFR。
有限度的使用sIFR，以获得最佳的下载时间。
不要在链接上使用sIFR。

方案三：Typeface.js

Typeface被认为是替代SIFR的最佳方案，相对于sIFR，Typeface少了Flash的应用，使用纯JS来嵌入相关字体，而且用法也很简单：在页面中引入相应的js文件就可以。

<html>
　<head>
<!--加载所有的样式先-->
　　<link　rel="stylesheet"　type="text/css"　ref="/style.css">
<!--再加载typeface.js　库文件和typeface.js字体文件-->
　　<script　type="text/javascript"　src="typeface-0.10.js"></script>
　　<script　type="text/javascript"　src="helvetiker_regular.typeface.js"></script>
　</head>
　<body>
<!--继续并使用CSS指定typeface.js字体-->
　　<div　class="myclass　typeface-js"　style="font-family:　Helvetiker">
　　　文本文本...
　　</div>
　</body>
</html>

方案四：cufon

cufon是一个比较新的技术，被定位为有价值的sIFR替代方案，它有很多优势：

无需浏览器插件——被浏览器原生支持；
兼容性——兼容各个主流浏览器
易用—— 无需配置
速度—— 快速渲染大量字体

cufon和typeface.js对比

	Cufón	Typeface.js
File size	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资源：

cufon项目: http://wiki.github.com/sorccu/cufon/about
cufon演示(列表): http://wiki.github.com/sorccu/cufon/demos
cufon生成器: http://cufon.shoqolate.com/generate/
wp-cufon: 一个使用cufon的wordpress插件 http://wordpress.org/extend/plugins/wp-cufon/
Typeface.js VS sIFR VS cufon: http://stackoverflow.com/questions/692990/sifr-vs-cufon-vs-typeface-js

6 Comments

我要评论

苏洋 February 2, 2012
动态生成每个页面的cufon缓存即可，没想象中的困难，而且，缓存数据也很小。我觉得对于中文是很好的方案，实现完成，在做字库中。
yayalemon February 19, 2011
所以，关于中文，还是放弃吧～其实有个最好完美解决方式，批量生成字体图片库，保存在服务器，根据字体编码读取不同的图片，既高效，又美观。但有两个问题： 1. 如何自动批量生产图片？ 2. 每一次调整，比如调整一下字体大小，就需要全部重新生成一次图片。后期工作量大。
yayalemon February 19, 2011
WEFT不用考虑，不支持中文，试了很多次了，尝试改变编码也没有用。有个网站可以在线修改为EOT，http://www.fontsquirrel.com/fontface/generator，但是不支持大文件，具体多大不清楚，至少1.5M以上大小的字体文件不支持，如果你中文字体量少可以试试。解决方法，下载一个小工具http://code.google.com/p/ttf2eot/downloads/list，是个exe文件，输入d:\>ttf2eot.exe d:\simsun.ttf d:\simsun.eot 最后，也是致命问题，在多台电脑上测试过了，IE浏览器是将整个simsun.eot读取下来，IE还有可能进入假死状态，至少接近2M多文件，一般客户端都没法接受，除非局域网。 cufon技术更好，但也有个严重问题，还是中文，cufon其实是将整个字库写进一个js文件里，记录字体矢量位置，因此这个js文件就有2M还多，客户端浏览器基本都受不了。
zbk September 13, 2010
非常实用的代码,我按照上面写的去操作了!
Firm August 28, 2010
只能是当做教程了
翻墙砖家 August 20, 2010
非常实用的代码，收藏了，谢谢博主。 ps：能跟你交换下博客链接吗？

SLJ.me