如何在网页设计中使用个性化字体
作者：神采飞扬 来源：前端观察 时间：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
投稿猜你喜欢
Python调用系统底层API播放wav文件的方法
用纯CSS3绘制的网站图标
用Python进行TCP网络编程的教程
Javascript优化（文件瘦身）
操作Windows注册表的简单的Python程序制作教程
使用FormData实现上传多个文件
python爬取免费代理并验证代理是否可用
MySQL和Python交互的示例
C# 制作PictureBox圆形头像框并从数据库中读取头像
如何使用django的MTV开发模式返回一个网页
Golang并发之RWMutex的用法详解
Golang实现断点续传功能
浅谈django开发者模式中的autoreload是如何实现的
Dreamweaver 网页编辑常用表现的实现方法
asp 过滤非法字符函数
Python自定义线程池实现方法分析
python防止栈溢出的实例讲解
python 实时调取摄像头的示例代码
MySQL 原理与优化之Limit 查询优化
