位置：首页>> 网络编程>> 网页设计>> 如何在网页设计中使用个性化字体

如何在网页设计中使用个性化字体

作者：神采飞扬　来源：前端观察　发布时间：2009-07-07 11:29:00　

标签：设计,个性化,字体,cufon,font-face

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

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

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

typeface资源：

2 下一页

投稿