Font Awesome------设计原理分析
Font Awesome
http://www.bootcss.com/p/font-awesome/
不知道什么时候起，人们探索发现，CSS 嵌入字体不仅可以用来丰富 web 字体的表现，更可以用来实现 icons。原理是很简单的，自定义一种字体，给不同的字配置作为 icon 的图案，然后通过 CSS 嵌入其中使用。使用它可以轻松地解决上面所遇到的问题，因为一旦将 icons 当作普通 text 来处理，font-size，color 之类的文本修饰随手解决，有了 CSS3 的支持，加个 text-shadow，旋转几下是相当轻松的。
以下文章原创为知更鸟，以此引用只为交流学习。
在这里向各位看官推荐下。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开始才有很好的效果。只是一种解决的思路。
