关于阿里妈妈字体图标

什么是icon fonts

这个实在不知道怎么描述，我的理解就是利用字体工具把Web上平时使用的图标(icons)转换成icon fonts;它可以借助CSS中的@font-face嵌入网页中，用于显示icons。

为什么要这样用呢

那咱们就说一下它的优点和缺点吧！

文件小：相比图片几十几百KB的容量，icon fonts 几乎是羽翼级轻量;
加载性能好：因为图标都被打包进一套字体内，http request 减少。这如同我们常用的 css sprites 技术;
支持CSS样式：和普通字体一样，你可以利用CSS来定义大小、颜色、阴影、hover状态、透明度、渐变等等…
缺点就是样式，颜色比较单一，还有就是在移动端浏览器的兼容性还不是很好，像Opera mini、Windows phone 7.0-7.8 都不能正常显示icon fonts。

如何使用icon fonts

那么问题来了，怎么制作的目前我也不关心，那咱们就说说怎么用吧(其实我也是一个渣渣，咱们就讲讲阿里妈妈的图标应该怎么使用吧！说错的地方还希望及时指出，大家共同进步)；

进入这个地址（icon fonts）;

然后咱们可以看到有图标库，图标管理；在图标库里面就可以选择需要的图标，然后把它加入到"购物车"中，此时右上角购物车会对应的展示你加入的数量，选择完成之后，点击购物车，选择添加至项目；这时会提示你需要登录，按照操作流程走就ok；

然后就可以看到咱们的项目列表了，icon fonts 都在这里面了，如果要使用的话，还是需要先下载到本地的；

下载后会是一个压缩包，只需要把这个压缩包解压至你的项目中就可以使用了;里面有一个demo_index.html 里面会给你讲三种生成图标的方式，这里我大致看了前两种，咱们就简单说一下吧！

Unicode Font class 引用方式
这个不知道是我的引用方式不对，还是确实是有问题，我按照示例的方法把代码给拷贝下来就是不能使用；

后来确定一下就是这个示例代码我不能使用，但是我又不能保证，毕竟我一个初学者，只能说我的技术不行;最后我又试了一下Font class引用方式，发现换了以下CSS那段代码，两种方式都能使用了。

看示例代码，是引用了font文件夹下的一个css文件，然后就顺着这个文件找到了示例代码

搞不懂url()中的部分内容是什么意思，水平有限；度娘都教不会我；总而言之这段是能使用的；

测试

这里可以看到我只是简单的引用了以下这个文件，这两种引用方式都ok了，有没有大佬知道原因的也可以告诉小弟，说实在话小弟也真的是一脸懵这一点，当然还有就是毋庸置疑这个是可以用的，这种方式最起码保证IE8+的浏览器可以使用；当然它现在是字体了，肯定也能控制一些其他样式，这里就不介绍了；

转载于:https://www.cnblogs.com/article-record/p/11418494.html