本文介绍了前端工程师如何通过icon-font减少图片内存占用，重点讨论了icon-font的优点，如无损放大、内存占用小，以及制作成本大等缺点。详细讲述了三种制作方法，包括在线生成器、工具生成和NodeJS插件，并提供了相关工具和资源链接。
制作背景：公司项目需要最大限度减少前端图片占用内存量（PC端+手机端图片占用总大小<80kb），常用的压缩图片方式不能完全达到要求，尤其是手机端如果采用常用的png格式图片，为了兼容分辨越来越高的现代移动设备（iphone 6s plus 1920×1080），设计师设计的图片必须保证图片像素点比较高才能显示清楚，高像素点也意味着图片很大。
Icon-font的优点：
Ø 纯色图片改成icon-font图标字体可以像操作文字那样操作图片；
Ø 基于SVG图片，放大后图片不失真；
Ø 占用空间小，制作成font-face字体后一个图标平均占用内存仅有2kb左右（若无需兼容ios4.1-则一张图片占用的空间<1kb）；
Icon-font的缺点：
Ø 制作成本大。设计师设计SVG图标，转换成字体库过程相对麻烦；
Ø 仅试用于纯色图片，色彩丰富的图片不可使用；
Ø 使用图片字体时，定位图片比较麻烦，会较多用到绝对定位等，对工程师是个考验。
制作Icon-font的输入和输出：
我们的输入：设计师制作好的SVG图标，
我们的输
最低0.47元/天 解锁文章
扫一扫
520
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
