摘要：简介是什么就像名字一样，就是图标字体，像雅黑字体，思源字体一样，这种字体就是由图标构成有何优势轻量性一个图标字体比一系列的图像特别是在屏中使用双倍图像要小。问题很小创作自已的字体图标很费时间，重构人员后期维护的成本偏高。
简介
- iconfont是什么？
就像名字一样，iconfont就是图标字体，像雅黑字体，思源字体一样，这种字体就是由图标构成~
- 有何优势？
1、轻量性：一个图标字体比一系列的图像（特别是在Retina屏中使用双倍图像）要小。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合HTML5离线存储做性能优化。
2、灵活性：图标字体可以用过font-size属性设置其任何大小，还可以加各种文字效果，包括颜色、Hover状态、透明度、阴影和翻转等效果。可以在任何背景下显示。使用位图的话，必须得为每个不同大小和不同效果的图像输出一个不同文件。
3、兼容性：网页字体支持所有现代浏览器，包括IE低版本。详细兼容性可以点击这里。
- 有何劣势？
1、图标字体只能被渲染成单色或者CSS3的渐变色。（问题很小,不要慌）
2、使用版权上有限制，有好多字体是收费的。当然也有很多免费开源的精美字体图标供下载使用。（问题很小）
3、创作自已的字体图标很费时间，重构人员后期维护的成本偏高。（问题很小）
基于上面的分析，可以看出iconfont基本没有劣势（滑稽）。
那么这么好的东西，哪里才能买到呢？
使用方法此文使用阿里妈妈的图标库。
步骤1：进入网站。
点击桌面上的浏览器，输入 http://www.iconfont.cn/ ，吧唧一声敲下回车
步骤2：选择自己喜欢的图标，点击购物车的按钮。
步骤3：选择完毕后，点击右上角的购物车按钮。
步骤4：点击添加到项目，如果没有项目则新建一个项目（“加入项目”按钮右边有一个浅灰色按钮），点击确定
步骤5：点击下载到本地。
步骤6：点开下载到的文件，点击demo。
步骤7：查看上面的教程即可~嘿嘿嘿
三种不同引用的区别和注意事项！unicode引用
特点：
-兼容性最好，支持ie6+，及所有现代浏览器。
-支持按字体的方式去动态调整图标大小，颜色等等。
-但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
注意：
这里src中需要填写对应路径，你下载到的文件（上一步骤叫你下载的）中名为iconfont的eot,woff,ttf,svg类型的文件都要扔进vue项目中
font-class引用
与unicode使用方式相比，具有如下特点：
-兼容性良好，支持ie8+，及所有现代浏览器。
-相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
-因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
-不过因为本质上还是使用的字体，所以多色图标还是不支持的。
注意:
使用这种引用只需要将下载到的文件中名为iconfont类型为css,svg,ttf,eot的文件扔进vue项目中即可
symbol引用
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：
-支持多色图标了，不再受单色限制。
-通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
-兼容性较差，支持 ie9+,及现代浏览器。
-浏览器渲染svg的性能一般，还不如png。
注意：
-使用这种引用只需要将下载到的文件中名为iconfont.js文件扔进vue项目中即可
-当从阿里图库中图标被添加至项目，如果编辑过项目图标的颜色或者图标本身是有颜色的，那么在通过symbol获取图标时会在svg的path中增加fill属性，导致无法更改颜色，如果需要动态修改颜色，需要这样操作
经过我们上面一些步骤的操作呢 我相信 你已经能看到这条咸鱼了。
.icon-xia{
font-size: 40px; // fontsize多大 宽高就多大
vertical-align: middle; //这个行内垂直居中简直不要太舒服
color: red;//改变颜色
opacity:.6;//改变透明度
...//没错，操作起来就像字体一样，纵享丝滑
}
最后
谢谢大家，有问题请在评论区指出
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114022.html
摘要：最早走出扁平化设计的是微软，在年推出的，就用了大量的简单形状，移除了复杂的样式和纹理。但是它有个问题就是，雪碧图比较适合固定功能的网站。而且目前我们公司网站设计全部使用，我都好久没打开过了，对于来说，雪碧图位置的标识也是个挺麻烦的事情。 最近公司的设计人员想要把网站上面的小图标都改为iconfont，我也做了一篇PPT分享给大家，如果现在不记下来，可能过几个月就忘得一干二净了 一· 现...
摘要：，从字面上就能理解它就是字体，让开发者像使用字体一样使用图标。制作生成需要矢量图。阿里巴巴矢量图标库和提供大量优秀的矢量图。这是一个文件，每一个标签对应一个矢量图标，包含它对应的代码和名称。 在iOS项目中，一般对图片资源要求有@2x，@3x两套，以适配不同分辨率的设备。对于有换肤需求的APP来说，还需要多套图来匹配不同的主题。这样不但无形中增加了开发者和设计者的工作量，而且会增大AP...
摘要：没关系，笔者已经为你们准备好了，请保存到文件中，假设你的文件名叫和你刚才保存的字体文件在一起，方便管理复制字体这个插件包有好多套字体，我们可以需要把自己的也复制到包中对应文件夹，当然了，不可能手动复制，笔者从来都是解放双手的。 字体图标盛行的年代，在项目里使用一套不失真又可以随意改变大小颜色的图标，是多么舒服的一件事。这里要推荐iconfont.cn，超多免费图标，当然了，你的专属美工...
摘要：所以实现小图标时雪碧图跟图标字体会在一个网站共存，自定义图标字体为什么比较耗时，且太复杂图标无法实现请往下看开发流程就了解了。参考资料细谈浅谈图标字体向下兼容优雅降级技术绘制小图标技巧雪碧图图标字体矢量小图标设计本文对应源码源码地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前写了一篇关于雪碧图的博文，...
阅读 2447·2021-11-25 09:43
阅读 2262·2021-09-22 15:29
阅读 729·2021-09-22 15:17
阅读 3418·2021-09-03 10:36
阅读 2013·2019-08-30 13:54
阅读 1616·2019-08-30 11:23
阅读 1035·2019-08-29 16:58
阅读 1173·2019-08-29 16:14
