webfont实现图标任意赋色及其他方案总结

前言

最近制作一个项目，由于主题风格不一样，每次都要重新切图，小icon又很多，身为切图小能手的我也感到十分疲惫。
考虑到后续有可能项目重构，各个主题风格又得重新切一次图了，于是开始寻找代替纯切图并适用于迭代版本的技术方案。
兼容性要求IE10+以上的浏览器。

方案挑选

A.background-blend-mode 或者 mix-blend-mode

实现过程

<div class="pic"></div>

.pic {
    background-image: url('https://user-images.githubusercontent.com/8554143/34239266-232bdfc0-e641-11e7-8792-408782aaa78e.png'), linear-gradient(deeppink, deeppink);
    background-blend-mode: lighten;
    background-size: cover;
}

效果

兼容性
移动端可以适用，但IE浏览器是不支持的哦

优点
操作简易，上手快速

缺点或受限条件
兼容多种格式，png，jpg，gif，只适用于图片图案是黑色纯色，背景是白色的图片，对于透明底色的图就无能为力哦。

B.filter:drop-shadow

实现过程
引用张鑫旭的demo https://www.zhangxinxu.com/study/201606/png-icon-color-fill.html

兼容性

C.filter滤镜混合

可以通过使用张鑫旭大神做的filter滤镜转换工具得到相近颜色值的滤镜混合
https://www.zhangxinxu.com/sp/filter.html

兼容性
同样IE系列是不支持的。

D.css mark遮罩

实现过程

<p>原图</p>
<img src="../img/_acti_icon1.svg" width="60px" height="auto">
<p>效果图</p>
<span class="colorful"></span>

.colorful{
   display: block;
    width: 60px;
    height: 60px;
    mask: url('../img/_acti_icon1.svg');
    -webkit-mask: url('../img/_acti_icon1.svg');
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    background-color: #b10a14;
} 

效果
原图：
效果图：
兼容性
同样IE系列是不支持的。

E.canvas修改颜色值

canvas利用getImageData()和setImageData(),循环图片的每个像素值去获取对应的颜色。
缺点是大一点的图片容易卡死而且多图的时候不易处理。具体查看文章

F.webfont制作成网页字体

不得不先吹一波彩虹屁，这个方案优秀优秀实在优秀
实现过程
把svg图上传到icomoon这个地址，然后选择去色，生成对应的webfont
注意：svg图的填充模式一定要是填充，不能是描边哦，不然生成webfont会失败，研究一晚上怎样用ai处理把描边模式改成填充模式，稍后补上ai处理流程，每张svg图都要固定大小，例如100*100，而且居中对齐且尽量铺满，不然做出来的字体效果不对齐而占不满很尴尬。

webfont生成页面地址：https://icomoon.io/app/#/select/font

1.上传自定义icon

2.选择编辑对应图片，选择去色

3.然后生成对应的font文件，在页面上引用就大功造成啦

兼容性
终于符合兼容IE10+的要求了，泪目

完结撒花，如有问题，欢迎评论哦