您当前的位置: 站长圈 > 技术文章 > 网页前端 > 用@font-face加载特殊字体

用@font-face加载特殊字体

来源:站长圈 作者:adminroy 点击: 0

有时候我们做英文网站,网页上要用到一些特殊字体,也就是不是Web安全字体,但是我又需要更多浏览器支持,那怎么办呢? 办法还是有滴,比如用@font-face属性来引入特殊的浏览器加载字体,或者用纯 JavaScript 开源类库(cufon-yui.js)来实现在网页中对文字字体进行渲染等。今天我们介绍前面一种。

说到浏览器对@font-face的兼容问题,这里涉及到一个字体format的问题,因为不同的浏览器对字体格式支持是不一致的,这样大家有必要了解一 下,各种版本的浏览器支持什么样的字体,下面就分别说一下这个问题,让大家心里有一个概念:

一、TureTpe(.ttf)格式:

.ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】;

二、OpenType(.otf)格式:

.otf 字体被认为是一种原始的字体格式,其内置在TureType的基础上,所以也提供了更多的功能,支持这种字体的浏览器有 【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】;

三、Web Open Font Format(.woff)格式:

.woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】;

四、Embedded Open Type(.eot)格式:

.eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】;

五、SVG(.svg)格式:

.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

所以我们要针对不同浏览器用不同格式的字体文件,然后引用它们。     

我想大家会感到@font-face很神奇,同时也想争着做做看,可是一动手才发现,特殊字体我要怎样才能得到,那些.eot,.woff,.ttf,.svg这些字体格式又怎么获取呢?有些朋友可能就不知道如何动手了,那么我们就带着这些问题来一个全程完成的实例吧:

一、获取特殊字体:

我们拿下面这种Annabelle.ttf字体来说吧:

要得到Annabelle.ttf字体,可以到任何免费的地方下载,比如
http://font.chinaz.com/yingwenziti.html
这里用到的Annabelle.ttf字体就可以在这里下载到  
\

下载下来后,把它解压缩出来,我们需要的是Annabelle.ttf这个文件


二、获取@font-face所需字体格式:

特殊字体已经在你的电脑中了,现在我们需要想办法获得@font-face所需的.eot,.woff,.ttf,.svg字体格式。要获取这些字体格式,我们同样是需要第三方工具或者软件来实现,下面我给大家推荐一个工具fontsquirrel,地址是 http://www.fontsquirrel.com/tools/webfont-generator 打开页面可以看见如下界面,

1.点击 “Add Fonts”按钮上传你的字体文件,

 \

2.完成后按默认选择中间的OPTIMAL最佳设置,然后在协议选项前打上勾,证明你的字体是合法的并允许在网络上使用的,打上勾以后右下角会有下载按钮,这时候你可以下载转换的字体文件和示例文件了

 \
\
 
三、把字体应用到网页中

把下载的压缩包解压缩,可以看见压缩包里有我们需要的字体文件,也有一个示例文件,感兴趣的可以看看,我们还是按照自己的步骤继续我们的操作。

 \

首先把字体文件剪切出来放在一个fonts文件夹里,然后新建css文件夹放我们的css文件,然后在同一个目录下新建一个html文件,结构如图

 \

 \

现在@font-face所需字体已经加载到本地项目,现在本地项目中的style.css中附上我们需要的@font-face样式

@font-face { 
        font-family: 'annabelle';
        src: url('../fonts/annabelle-webfont.eot'); /* IE9 Compat Modes */
        src: url('../fonts/annabelle-webfont.eot?#iefix') format('embedded-opentype'),  /* IE6-IE8 */
             url('../fonts/annabelle-webfont.woff') format('woff'), /* Modern Browsers */
             url('../fonts/annabelle-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
               url('../fonts/annabelle-webfont.svg#annabelle-webfont') format('svg');  /* Legacy iOS */
	font-weight: normal;
	font-style: normal;
}

到这里为止,我们已经通过@font-face自定义好所需的annabelle字体,离最后效果只差一步了,就是把自己定义的字体应用到你的Web中的DOM元素上:

\
效果如图:
 \

这里要说明的是
font-family: 'annabelle';这里的字体名称是自定义的,你可以叫aaa、bbb,不过设置的时候也要写成.annabelle { font-family: 'aaa' },不过我们还是起的专业一点比较好,比如就用字体本身的名字。