昨天前端的同事和说我，“大V啊，你把icon都上传到iconfont吧，这样我们只需要调用一次！”。虽然当时我一脸懵逼不太懂什么叫调用一次，但是还是硬着头皮，去探索阿里iconfont的上传功能。

我是用sketch做的图，网站给的AI模版。在和网站云雨一番之后，终于弄懂了sketch该怎么传，于是开始了我的上 床 传之路。

我画了如下图标：

没错，是一个看起来就香甜可口的冰淇淋！点击导出SVG，上传阿里Iconfont，过程一气呵成，简直完美！

等等！WTF！为什么上传之后，我的冰淇淋变成了便便！于是我回头检查sketch图层。

两个图层属性是相同的，并没有问题，但是为什么上面的便便能在Iconfont中显示出来，下面的蛋筒却不行？百思不得其解的我开始百度搜索，然而并没有有效的答案！我再次和我们的程序员大妹子沟通。

没别的办法，只能用这个网站，难道要我全导入AI嘛？秉着我求实（懒惰）的态度，我打开sketch胡乱探索！

如同进村的鬼子一样，每个选项我都点点按按。然后我在角落里发现了这个东西：

sketch默认的是奇偶性，于是我把它改了一下，变成了非零性：

咦？和我上传iconfont时，犯的是同一个毛病，这是sketch的阴谋，还是iconfont的扭曲？

为了验证这一发现，我又实验了几个图标，得出一个结论：iconfont是按照非零性显示svg格式icon。而sketch默认按照奇偶性显示icon。

知道了原因，那么我该怎么做，才能打破便便的诅咒？当然是知其所以然，那么我们需要先搞懂什么是奇偶性，什么是非零性！

奇偶原则、非零环绕原则，是判断路径重叠的图形如何填充的原则。

奇偶原则比较好理解：假设每个封闭的小区域里都有一个被困的小点，这个点要出去，如果穿过偶数条边那么这个区域就不填充，如果穿过奇数条边就填充，如下图所示：

非零环绕原则也不难理解：同样假设每个封闭的小区域有个被困的小点点，这个点要出去，穿过一条顺时针的边就+1，穿过一条逆时针的边就-1。小点出来以后，得数是0这个区域就不填充，得数非0就填充。如下图：

我们再看一下刚才的五角星变成非零性是什么样的：

这个点出来之后，穿过两条顺时针的边，最后得数不为零，所以该区域被填充了。

其实非零环绕原则简单点说，就是穿过的顺时针边数=逆时针边数就不填充，否则填充。

对比而言，奇偶性只要穿过双数边，就显示为不填充。而如果要非零性原则显示为不填充的话，不仅要穿过双数边，还需要所穿过的顺时针和逆时针边数量相同。这样就不难理解为什么sketch里显示不填充，而iconfont中显示填充了——因为穿过的顺时针边，和逆时针边不同呀！！！

当然了，这两种原则还有很多细节性的东西，比如小点点出来的时候，刚好经过一个锐角的顶点。这些不太影响我们的判断，就不在这细说了，大家有兴趣的话可以问下度娘。

知道了原因，现在就要开始解决iconfont中不显示布尔运算的问题了。通过上面对奇偶性和非零性分析，上面的便便可以显示，下面的蛋筒不显示，那么路径应该是这样的：

不论sketch的默认路径方向如何（上图方向仅作示意），蛋筒里的点点一定是穿过了两条相同方向的线，所以在iconfont中显示不出来。那么我们该如何更正，才能使其显示出来呢？

机智的我想出了办法，没错，就是水平翻转或垂直翻转！

翻转之后，图形的形态不变，但是路径方向刚好变换了。这是变换路径方向最便捷，最偷懒的方法。我们赶紧试验一下！

很好！水平翻转之后，终于可以在非零性中显示出蛋筒了。

我们赶快上传试一下！

耶！终于成功了，便便又重新变成了好吃的冰淇淋！

有的图标不是左右对称，那么可以试试垂直翻转。

如果左右上下都不对称，试试翻转图标外轮廓。

那么现在问题来了：

我想在大香蕉里减去一个小香蕉！怎么办？？？？

别慌！把图层分开，给里面的小香蕉添加一个外描边，然后点击轮廓，将描边转换为形状。

转换后进行布尔运算减去顶层。

然后直接删除小香蕉的外轮廓，这样留下的小轮廓尺寸和之前的小香蕉尺寸是一样的！

哈哈哈哈，大功告成！妈妈再也不用担心sketch上传iconfont某部分不显示了！

人民群众的智慧可以战胜  一切  大多数困难！

新人第一次发帖，不足之处请各路大神轻喷。如果这篇贴子对你有一丢丢帮助，或者学到了一丢丢知识的话，点个赞吧，嘿嘿嘿！

（sketch42之前版本存在该问题）