首页 > 技术文章 > 关于阿里妈妈字体图标,国外字体图标地址

article-record 2019-08-27 15:14 原文

https://icomoon.io/
什么是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+的浏览器可以使用;当然它现在是字体了,肯定也能控制一些其他样式,这里就不介绍了;

推荐阅读