网页文本替换技术

wbj0110

浏览: 1598665 次
性别:
来自: 上海

最近访客更多访客>>

一往无前bhz

ninja2006

loginboot

u012363178

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Js
CSS
JQuery
Http Web
前端

网页文本替换技术

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

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

<html>

<head>

<!-- 加载所有的样式先 -->

<link rel="stylesheet" type="text/css" ref="/style.css">

<!-- 再加载typeface.js 库文件和typeface.js字体文件-->

<script src="typeface-0.13.js"></script>

<script src="helvetiker_regular.typeface.js"></script>
</head>

<body>

<!-- 继续并使用CSS指定typeface.js 字体 -->

<div style="font-family: Helvetiker">文本文本...</div>

</body>

</html>

从中我们可以看出来，使用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：

<script type="text/javascript">Cufón.replace('h2', { fontFamily: 'Qlassik Medium' }); </script>

这与typeface的在样式中定义字体很不一样。

cufon资源：cufon项目、cufon演示、cufon生成器、wp-cufon 一个使用cufon的wordpress插件。

cufon和typeface.js对比：

CufónTypeface.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，下载。

可以使用的样式如下：

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

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

分享到：

JS+CSS实现隔行换色 | SuperFish一款基于jQuery的级联下拉菜单

2013-09-20 21:32
浏览 867
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论