为bootStarp添加自己的字体图标

前言：项目使用的bootstarp，做某些组件的时候图标不够用，然后添加了阿里的iconfont图标。挺好用的放个链接iconfont官网。不理解字体的原理，然后今天工作做完之后，抽空研究了一下。

看了好多字体的使用，发现基本都是通过css3的@font-face添加字体文件（关于@font-face，可以看看张鑫旭大牛的博客：

张鑫旭真正了解CSS3背景下的@font face规则

下边放上bootstarp的部分源码：

@font-face{
    font-family:'Glyphicons Halflings';
    src:url(../fonts/glyphicons-halflings-regular.eot);
    src:url(../fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),
    url(../fonts/glyphicons-halflings-regular.ttf) format('truetype'),
    url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')}
.glyphicon{position:relative;top:1px;display:inline-block;font-family:'Glyphicons Halflings';font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.glyphicon-asterisk:before{content:"\2a"}.glyphicon-plus:before{content:"\2b"}.glyphicon-euro:before,.glyphicon-eur:before{content:"\20ac"}

可以看到用过src引用本地的字体库，后边引用这么多是为了兼容多个浏览器。此处引用百度搜索的描述：

一、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+】。

也解答了我之前一直懵逼的问题：为毛引用这么多。由于我是在chrome下测试的页面，所以修改了woff，测试了一下在chrome下修改.woff和修改.ttf其实是一样的。下一步百度下载字体工具，打开了woff文件（我下载工具为：FontForge不一定非要这个只要能打开字体文件就行）打开如图：

然后找到空位置（记住该位置的uncode坐标，后边要用），双击开始绘制自己的图标。绘制完成之后保存即可。注意：FontForge保存后生成了一个新的sfd文件，我是通过在线转换工具转换成woff替换了boot的源文件。替换完成之后，打开bootstarp的css文件找到类似

glyphicon-cloud:before{content:"\2601"}

这样的，在他后边添加属于自己的css名称后边的content就是刚才修改位置的uncode坐标，如：

.glyphicon-man:before{content:"\e20f"}//这是我修改后新增的class

然后页面上正常引用boot的类名

<ul>
   <li>
    <span class="glyphicon glyphicon-big"></span>//新增
   </li>
   <li>
    <span class="glyphicon glyphicon-nattiness"></span>//新增
   </li>
   <li>
    <span class="glyphicon glyphicon-man"></span>//新增
   </li>
  </ul>

效果如图：

到这里手动向boot字体库添加图标就完成了，不过这种方式只能对.woff.ttf这种字体文件有效果，svg的图目前还没有深入研究，等不忙了再研究研究svg图标。