这里是修真学堂的前端小教室。每篇文章分享自【背景介绍】【知识分析】【常见问题】【解决方案】【编码实践】【扩展思考】【更多讨论】【参考文献】从八个方面深度剖析前端知识/技能，本文分享：【如何使用IconFont？——矢量图标】一、背景介绍网上有些小图标，不仅可以用csssprites制作，也可以用流行的iconfont制作。那么先搞清楚一个问题，什么是iconfont？顾名思义，图标字体可以理解为图标+字体，即图标字体。图标字体可以理解为一种特殊的字体，网页中的一些小图标和特殊字符都可以通过这种方式实现。简单的说，就是以图为文。2.知识分析2.1什么是iconfont？iconfont，字体图标。通过使用字体格式的矢量图标代替过去图像格式的小图标。字体是矢量化图形，本质上是“分辨率无关的”。在任何分辨率下，它们都可以完美缩放和扩展。与传统图片不同的是，增加到一定程度就会出现明显的锯齿。或变模糊，影响显示效果。2.2如何使用图标字体？提供图标字体的网站有很多，比如阿里巴巴矢量图标库、fontello、icomoon、Font-Awesome、GlyphiconHalflings、Icons8，今天我们主要介绍国内使用最多的阿里巴巴矢量图标库。在阿里巴巴矢量图标库中，Web端主要有四种引用方式，分别是icon单体使用、unicode引用、font-class引用和symbol引用。图标是单独使用的，单个图标的用户可以选择下载不同的格式使用，包括png、ai、svg。这种方式适用于图标引用很少，以后不需要特别维护的场景。例如，设计师用它来制作演示原型。暂时在前端做一个活动页面。当然，如果只是做下载图标的PPT，也是极好的。但如果是在系统应用中使用，建议用户将图标添加到项目中，然后使用以下三种推荐方法。Unicode引用，批量引用方式之一，是网页上最原始的应用方式。最佳兼容性，支持ie6+，以及所有现代浏览器。支持根据字体动态调整图标大小、颜色等。由于是字体，不支持多色。平台上只能使用单色图标，即使项目中有多色图标，也会自动去色。font-classreference是unicode用法的一种变体，主要解决unicode书写不直观和语义不明确的问题。支持ie8+和所有现代浏览器。与unicode相比，语义清晰，书写更直观。很容易看出这个图标是什么。使用类来定义图标。更换图标时只需要修改类中的unicode引用即可，更加方便。仍然不支持多色图标。符号引用是一种全新的使用方式。应该说这会是未来的主流，也是目前平台推荐的用法。支持多色图标，不再受限于单色。支持ie9+和现代浏览器。浏览器渲染svg性能一般，不如png。3.FAQ问题：如何修改项目中图标的大小和颜色？4.解决方案用一个demo来演示说明：demo5。编码实践6.扩展思考题：iconfont相对于各种图片格式的小图标有什么优缺点？优点：1.轻量级：图标字体小于一系列图像。加载图标字体后，将立即呈现图标，而无需下载图像。它可以减少HTTP请求并使用HTML5离线存储优化性能。2.灵活性：图标字体可以通过font-size属性设置为任意大小，还可以添加各种文字效果，包括颜色、悬停状态、透明度、阴影、翻转等效果。可以显示在任何背景上。使用位图必须为每个不同大小和效果的图像输出不同的文件。3.兼容性：网络字体支持所有现代浏览器，包括低版本的IE。有关详细的兼容性，请单击此处。缺点：1.图标字体只能呈现为单色或CSS3渐变，因此无法广泛使用。（已经支持彩色图标）2.版权有使用限制，收费的字体很多。当然也有很多免费开源的精美字体图标可供下载使用。3.自己制作字体图标比较费时间，重构人员后期维护成本比较高。7.参考资料参考资料1：分享国内外免费开源的图标字体库参考资料2：图标字体的应用及优缺点参考资料3：CSS中iconfont的使用详解参考资料4：阿里巴巴矢量图标库》我们相信每个人都可以成为一名工程师，现在就开始吧，找一个指导你入门的师兄，学习的路上不再迷茫。这里是技能树。IT修真学院：http：//www.jnshu.com，转战互联网行业新手的聚集地。》欢迎加入IT交流群565734203与大家一起讨论交流博文链接！
