Font-Awesome 魅力四射的html5 css3应用

最近我们头给我看了一个项目，感觉很有意思就研究了下。在这里向各位看官推荐下。Font-Awesome，这个项目主要是css3的一个应用，准确的说是一段css，这里的把很多图标的东西做到了font文件里面，然后通过引用外部font文件的方式，来展现图标。看看效果 猛击这里到Font-Awesome

那么看过以后大家有些疑惑，前端的同学可能会打开console看看具体的css代码，却没有发现任何的图片引用.其实大家可以在官方下载整个Font-Awesome项目，到目录的font下面，那个里面有很多font文件，那么，有兴趣的同学可以用font编辑软件打开看看font文件里面的内容，我想大概就明白了，我这里就截图吧。具体font软件有很多，我用的是FontLab Studio 5.

下面我有了font文件的内容，我们来看看怎么用font文件把图标显示出来，首先使用的是@font-face属性，来引用外部font文件。

@font-face {
 font-family: <YourWebFontName>;
 src: <source> [<format>]
 [,<source> [<format>]]*;
 [font-weight: <weight>];
 [font-style: <style>];
}

取值说明

1、YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如“font-family:”YourWebFontName”;”

2、source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；

3、format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等；

4、weight和style:这两个值大家一定很熟悉，weight定义字体是否为粗体，style主要定义字体样式，如斜体。

看看Font-Awesome里面的用法

@font-face {
 font-family: 'FontAwesome';
 src: url('../font/fontawesome-webfont.eot');
 src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
 url('../font/fontawesome-webfont.woff') format('woff'),
 url('../font/fontawesome-webfont.ttf') format('truetype'),
 url('../font/fontawesome-webfont.svgz#FontAwesomeRegular') format('svg'),
 url('../font/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
 font-weight: normal;
 font-style: normal;
}

可能大家有疑问了，那么这个属性各浏览器的支持情况，还有就是万恶的ie6是否可以支持。我也查了，神奇的是@font-face这个属性早在ie6之前的版本就已经兼容了。我了个去~~。其它浏览器就不用说了，最新版本的FF，chrome，safari都支持的很好。不过字体文件的支持跟浏览器还是有关系的。对于各种后缀的font文件，我从别人的blog那copy了一段文字，给大家看看。
一、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中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。

为了使@font-face达到更多的浏览器支持，Paul Irish写了一个独特的@font-face语法叫Bulletproof @font-face:

@font-face {
 font-family: 'YourWebFontName';
 src: url('YourWebFontName.eot?') format('eot');/*IE*/
 src: url('YourWebFontName.woff') format('woff'),
 url('YourWebFontName.ttf') format('truetype');/*non-IE*/
}

但为了让各多的浏览器支持，你也可以写成：

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

看到这里，各位再回去看看Font-Awesome里面的写法，是不是就看懂了很多了呢。至于有不明白的同学，可以去google下，上面有很多相关资料。

既然我要使用里面的图标，那么多图标，怎么调用呢，这个是个大问题，样式名称就一个，怎么区分图标呢，各位不是看到我截的图了吗，就是font文件那张，里面看到图标的上面不是有16进制的序号吗。哦了，就是它，用图标上头的那个序号来找这个图标，来看看Font-Awesome里面某个样式的css定义

.icon-glass::before {
 content: "f000";
}
[class^="icon-"]::before, [class*=" icon-"]::before {
 font-family: FontAwesome;
 font-weight: normal;
 font-style: normal;
 display: inline-block;
 text-decoration: inherit;
}

如果前端看不懂那就不能原谅啦。至于其它同学，稍微解释下：[class^="icon-"]这个是选择匹配，就是icon开头的class，都应用这个样式。后面也一样，如果想深入了解，去w3c school那里有很多资料。关键是下面，icon-glass，看到了吗，content:后面，那个就是16进制的序号啦，有兴趣可以去Font-Awesome主页上面用console打开，改改里面的内容看看就明白了。关键是操作。至于上面其它的css大家可以慢慢看看的。

至于这么做有什么好处，不言而预。比较方便的管理图标文件，还有就是使用font来控制比使用background那引用简单便捷易于控制，而且对于很多不同浏览器对位置的计算不是一样的，那么有时候大家会发现，icon在不同的浏览器中表现的不是一样的，尤其是繁琐的定位。而且对于不同版本的浏览器引入的图片文件还不尽相同。这里又要说到万恶的ie6了，对于png图片，ie6下使用png8，解析度就要差很多。当然了ie6下也不支持以上写法，因为对于css3的支持还要从ie9开始才有很好的效果。只是一种解决的思路。

非常感谢大家看此文。还望跟多的工程师可以一起交流。