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文件。

1. @font-face {

2. font-family:<YourWebFontName>;

3. src:<source>[<format>]

4. [,<source>[<format>]]*;

5. [font-weight:<weight>];

6. [font-style:<style>];

7. }

取值说明

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里面的用法

1. @font-face {

2. font-family:'FontAwesome';

3. src:url('../font/fontawesome-webfont.eot');

4. src:url('../font/fontawesome-webfont.eot?#iefix')format('embedded-opentype'),

5. url('../font/fontawesome-webfont.woff')format('woff'),

6. url('../font/fontawesome-webfont.ttf')format('truetype'),

7. url('../font/fontawesome-webfont.svgz#FontAwesomeRegular')format('svg'),

8. url('../font/fontawesome-webfont.svg#FontAwesomeRegular')format('svg');

9. font-weight:normal;

10. font-style:normal;

11. }

可能大家有疑问了，那么这个属性各浏览器的支持情况，还有就是万恶的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:

1. @font-face {

2. font-family:'YourWebFontName';

3. src:url('YourWebFontName.eot?')format('eot');/*IE*/

4. src:url('YourWebFontName.woff')format('woff'),

5. url('YourWebFontName.ttf')format('truetype');/*non-IE*/

6. }

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

1. @font-face {

2. font-family:'YourWebFontName';

3. src:url('YourWebFontName.eot');/* IE9 Compat Modes */

4. src:url('YourWebFontName.eot?#iefix')format('embedded-opentype'),/* IE6-IE8 */

5. url('YourWebFontName.woff')format('woff'),/* Modern Browsers */

6. url('YourWebFontName.ttf')format('truetype'),/* Safari, Android, iOS */

7. url('YourWebFontName.svg#YourWebFontName')format('svg');/* Legacy iOS */

8. }

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

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

1. .icon-glass::before {

2. content:"f000";

3. }

4. [class^="icon-"]::before,[class*=" icon-"]::before {

5. font-family:FontAwesome;

6. font-weight:normal;

7. font-style:normal;

8. display:inline-block;

9. text-decoration:inherit;

10. }

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

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