读书人

在网页中嵌入随意字体的解决方案

发布时间: 2012-10-25 10:58:57 作者: rapoo

在网页中嵌入任意字体的解决方案

?? 字体使用是网页设计中不可或缺的一部分。经常地,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计。美工设计师最常做的办法是把想要的文字做成图片,

?

这样做有几个明显缺陷:

1. 不可能大范围的使用该字体;

2. 图片内容相对使用文字不易修改;

3. 不利于网站SEO(主流搜索引擎不会将图片alt内容作为判断网页内容相关性的有效因素)。

?

网络上有一些使用sIFR技术、或 javascript/flash hack的方法,但实现起来或繁琐,或有缺陷。下面要讲的是如何只通过CSS的@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 Explorer4.0 只支持OpenType字体(eof格式)Firefox (Gecko)3.5 (1.9.1)TrueType(ttf格式)和OpenType 字体Opera10.0 TrueType 和OpenType 字体Safari (WebKit)3.1 (525)TrueType和OpenType 字体

?

从表中可以看出,IE系浏览器不支持TTF格式的字体,只支持eof格式,不过,微软官方发布了一个WEFT工具,可以将TTF转化为EOF,需要的朋友可以去下载使用 。

?

可以使用的样式如下:

读书人网 >Web前端

热点推荐