CSS应用-字体图标化
最近做的项目与自定义页面有关系，要求开放自定义样式给第三方，虽然我是一个Java开发的
但还是去调研了一下竞争对手的基本情况，虽然只能看到表面上的东西，但还是能给自己一点启发
这过程中我发现一个很有意思的东西（可能是我没接触过，所以不太懂），那就是字体图标
1.先看一张图
看到用黑框标记的那一排小图标吧，一开始我以为是用了background或者img标签来制作的
但是我用firebug看了好久，都没找到跟图片扯上关系的东东。。。后来仔细看了下html结构和css样式
.fp-iconfont {
font-family: fp-font;
}
好吧，刚开始莫名其妙的，但是注意到两个我从来没了解过的东西
一个就是这个 㑑 字，另一个就是 fp-font 这个字体，我在想：难道这些图标是一种字体
好吧，我把这个 㑑 字在html结构里面去掉，果然那个小图标就没了。。。
然后呢，我把这个页面的css样式下载下来，一个名为 index.css 样式文件，内容如下
@font-face {
font-family: fp-font;
src: url(http://at.alicdn.com/t/font_1394079079_0082858.eot?#iefix) format("embedded-opentype"), url(http://at.alicdn.com/t/font_1394079079_0406601.woff) format("woff"), url(http://at.alicdn.com/t/font_1394079078_8924356.ttf) format("truetype"), url(http://at.alicdn.com/t/font_1394079079_06411.svg#iconfont) format("svg");
}
.fp-iconfont {
font-family: fp-font;
}
.hidden {
display: none;
}
.bold {
font-weight: 700;
}
...后面很多省略掉
这就很清楚了，确实引入了他们自定义的字体，因为字体文件一般就是eot、ttf之类的文件
原来他们用的是自定义的字体这玩意，我只能说比我们高级多了（当然我发现很多设计思想比我们高级的，这个图标字体充其量是我没接触过而已）
了解到是一种字体之后，我就百度了一下，看来这玩意有很多资料啊，看来真的是我out了
2.字体图标的优势
体积小，下载速度快：如果是图片的话，还要下载图片呢，多张图片就要建立多次http连接下载
灵活性高：因为是字体嘛，所以还可以对字体设置各种样式啊，比如字体大小，颜色等等
如果是一张图片的话，要放大缩小，那就要做好几张图片了。。。
当然，有优势肯定就有劣势，不然谁还用图片呢。毕竟图片的多样性和丰富性
字体是远远不能比的，但是对于整个系统而言，如果要用到很多标准化的小图标
就可以考虑做一套自己的字体图标了
3.如何使用字体图标
你得会制作字体（当然我不会，这个我是外行），但是百度了一下看起来也不是很复杂，
比如使用Keyamoon制作的一个Web应用程序IcoMoon，然后再转换成Web字体
因为我不会，也不太感兴趣，所以就找了个网站下了几个字体图标，演示一下怎么用
http://icomoon.io/ 这个网站有很多免费的，可能就有你要的，我选择几个图标字体下载了，如图
然后这个网站很人性化，他把这些图片如何使用，都给你生成好了，包括样式文件和你下载的字体
然后你打开demo.html就可以看到效果了，页面会展示你刚才下载的图标，本质是字体而已
那么如果你自定义了字体，使用起来其实蛮简单的，给一段demo的代码就明白了
/** html 片段 **/
/** css 引入自定义字体 **/
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?-dgigik');
src:url('fonts/icomoon.eot?#iefix-dgigik') format('embedded-opentype'),
url('fonts/icomoon.woff?-dgigik') format('woff'),
url('fonts/icomoon.ttf?-dgigik') format('truetype'),
url('fonts/icomoon.svg?-dgigik#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
/** 使用自定义字体 **/
.icon-headphones {
font-family: 'icomoon';
}
/** 其实字体图标就是：将某个字映射到一个字上面,这里是映射到 e600 **/
/** 还记得之前我提到的那个生僻字吧,就是这么干的**/
.icon-headphones:before {
content: "\e600";
}
发现其实蛮简单的，就是先引入字体，然后定义一个class样式：指定使用你自定义的字体
完了之后，使用你定义的字映射到字体图标上，这里面耳机图标就是映射到 e600 上面
只不过这里面使用了 before 这个样式，指定在span标签里面插入 e600 这个
因此页面打开之后，就用字体图标展示了