每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
大约一年前，写了一篇关于iconfont 如何设计、使用、维护的文章(传送门)。而今天特意再拿iconfont 来写一篇文章，主要是项目实际执行过程中，使用icomoon 生成iconfont 使用时，以MD的设计规范来设计，SVG完全以24x24的模式来生成导出，会产生偏移的问题。
前因
目前项目进入前端组件规范化的过程，而在制作按钮时，发现了图标与文案存在1px不对齐问题，如下图：
正常应如左侧，对齐；现在应用时却是右侧的情况，icon 往上偏移了。
起初，由于对MD规范的盲目依赖，认为设计端的SVG输出都是正确的，于是乎都以为是前端／开发的代码处理问题，没有对iconfont 进行正确的读写，而开发端也确实用了比较粗暴的方式让效果看似没问题了，但却同时引发了更多的问题。其他iconfont 资源在应用时都不得不进行一些特殊的处理，增加了开发成本。
在一系列的尝试之后，不得不换个角度来看问题，先排除技术端的可能性，把问题回归到设计端，尝试发现问题。
分析
首先，找到了Google官方在用的Material Design icon的开源iconfont，把其中的SVG放到icomoon 中看看它的图形结构实际应用是不是一致的，如图：
结果很惊讶，发现官方貌似不是一个做法啊，难道问题出在这里？但随后又发现每一个图形的宽度结构其实都不一样，只有一个共同点，高度统一。但高度统一这一点我们也是遵循规则的啊，而宽度不同会导致上下偏移，逻辑上说不通啊。且现阶段已经有200多的图标，实验的成本太高！结论：此路不通，继续换思路。
假设SVG不是根源问题，那只能把问题转移到生成iconfont 的工具icomoon 上了。而icomoon生成iconfont 是非常简单的，导出时有一些基础的设定，这个在以往确实没有深入去看每一个选项到底代表了什么，都是直接用默认值，死马当活马医的心态下，发现了确实会影响iconfont 对齐问题的选项，如下图：
Baseline Height - 这个，其实就是在字体设计中的一个对齐基线的设定
再翻出icomoon 的功能说明，其中就有对于这个选项的说明(传送门)
从图中很明显看出了默认的6.25 是怎么来的，而改变这个数值就会影响icon 在实际应用时的垂直位置。此时简直柳暗花明又一村，基于我们SVG制作的方法，直接把6.25 改为0，测试一下是否对齐了。
马上让前端测试之后，可见偏移问题已消失，会心一笑 ;p
问题
好吧，其实开心得太早！
在开心满满以为解决问题了，于是乎也把其他2个iconfont 资源也以同样的方法更新，然后让WEB、Android、iOS各平台更新资源。而现实是残酷的，再一次告诉了我不严谨验证的后果，偏移问题仅是其中1个资源解决了，其他2个还是一样！悲剧～到底问题在哪里？明明设置都是一样的啊！
此时，幸运的是，Mobile开发小组长提供了一个便于验证对齐问题的小工具(传送门)，把不同iconfont 资源进行同时的对比，正常资源如下：
而依然存在偏移问题的资源，非常明显，如下图：
但是从icomoon 导出的设置都一样，且SVG的设计规范也是一致的，到底是什么问题？疯掉～
好吧，冷静，再次针对不同资源的差异化进行分析，突然想到是否有可能是字体范围的渲染机制问题。于是，检查正常资源的库时，发现当时在设计"百度贴吧"的社交icon 时，由于其LOGO的图形特殊性，为了保证线条饱满和符合我们的设计规范，所以整个图形都是铺满整个画布的，如下图：
抱着怀疑的态度，我把"百度贴吧"的icon 复制到另外的资源中，然后，如图：
看到这一幕简直要哭了有木有，几经波折啊！小心翼翼让APP开发的同学先更新资源测试一下是否真的解决问题了，回馈是：OK！
好吧，问题到此为止，完美解决。起初只是因为1px 的对齐问题，后面引发了一系列的开发填坑的事情。由此作为设计师不得不反思自身啊，任何工具和方法的使用，没研究透彻就投入项目，发生问题也容易盲目自信，忽略了其真正的原因，共勉！
全部评论：14条
-
HeNgrY
2019-11-28 17:15@Sssssss_Star: 一般来说，图标和文字都是直接继承上级所定的字号，所以同一个字号，是正常普遍的；而不一致的话，就要看实际的技术结构，发现问题针对性解决了，没有普遍说法；
-
-
-
-
-
-
-
-
猥琐发育
2018-06-12 14:36请教个问题，在阿里巴巴的iconfont官网上，下载Ai制作模版，大小为1024*1024。但是我要制作一个大小为20px*20px描边为1px的图标，该怎么处理呢？
-
HeNgrY
2017-05-12 17:29@Leon_seoi_gin: 你这个问题太笼统了，可能是你设计阶段就有问题了，建议你看看我之前写的关于iconfont 制作相关的文章，文章开始有地址链接
-
-
-
-
更多作品
发表评论