简述sIFR、typeface.js和cufon文本替换技术 - 面向对象网,web开发,网页制作技巧,学习,对象 - 面向对象技术开发

面向对象技术开发

会员投稿 投稿指南 站长资讯通告:
您的位置: 首页 > Web开发 > 页面设计 > 网页制作技巧 > 正文

简述sIFR、typeface.js和cufon文本替换技术

来源: www.bianceng.cn 阅读:

一个常常令设计师和前端开发人员都头疼的事情就是字体的使用,设计师常常在设计稿中使用某些很漂亮的字体,以实现比较酷炫的界面。但这样常常给编码人员造成一些难度,如果在页面中放弃使用这些字体,设计师会感到郁闷,而如果使用这些字体的话,就要切图并使用很多额外的样式——又一个鱼和熊掌的抉择。还好,现在已经有了一些相关的替代技术了。

1. @font-face

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: qianduanNet;

font-style: normal;
  font-weight: 400;

src: url("SketchRockwell.ttf");
}
.fontFace{

font-family: qianduanNet;

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);
}

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

@font-face资源:

CSS3系列教程:嵌入字体/网络字体

Mozilla开发者中心:@font-face

Web fonts with @font-face

sIFR

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

考虑到网上已经有很多资源,本文就不再赘述,想要了解的朋友可以参考一下文章:

如何以及何时使用sIFR

sIFR-文本替换技术

sIFR——百度百科

Typeface.js

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

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

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

Tags:
相关文章列表: