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