如何在网页设计中使用个性化字体
作者：神采飞扬 来源：前端观察 时间：2009-07-07 11:29:00
一个常常令设计师和前端开发人员都头疼的事情就是字体的使用，设计师常常在设计稿中使用某些很漂亮的字体，以实现比较酷炫的界面。但这样常常给编码人员造成一些难度，如果在页面中放弃使用这些字体，设计师会感到郁闷，而如果使用这些字体的话，就要切图并使用很多额外的样式——又一个鱼和熊掌的抉择。还好，现在已经有了一些相关的替代技术了。
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资源：
sIFR
sIFR并非一种新技术，而是已经存在并被使用很多年了。sIFR是一种很有用也很好用的文本替换技术，通过Flash+JS+CSS将网络字体嵌入到页面中。
考虑到网上已经有很多资源，本文就不再赘述，想要了解的朋友可以参考一下文章：
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只需要着简单的几步就可以在页面中使用嵌入字体了。
typeface资源：
0
投稿猜你喜欢
W3C优质网页小贴士（三）
Oracle数据库安全策略分析 (三)
5种禁用html页面的缓存方法
PHP程序员最常犯的11个MySQL错误
Javascript 中 String.replace( ) 的妙用
《色彩解答》系列之三 色彩对比
利用XMLBean轻轻松松读写XML
在ASP中使用SQL语句之11:记录统计
Oracle 安装和卸载问题收集（集合篇）第1/6页
微软建议的ASP性能优化28条守则(3)
WinHTTP Services 5.1 参考资料
让文本框textarea自动适应内容的高度
ASP实现多域名同一空间的处理实例
ASP如何获取通过代理的真实IP地址
oracle chm帮助文件下载
创建数据表/创建列的一些asp函数
asp 数据库连接函数代码
利用ASP在线维护数据库
