起航学习网

- 让每个人都能学到最前沿新知识、新技能!
起航学习网
当前位置: 起航学习网 > 短期培训 > 设计培训 > iconfont对不齐怎么办

iconfont对不齐怎么办

时间:2019-03-12 13:06:43来源:我爱设计网 作者:IT培训网 已有: 名学员访问该课程

  快捷搜索:iconfont(1)


机构名称:IT培训网 联系手机:13783581536 在线客服:起航学习网客服 在 线 QQ:起航学习网客服 网站域名:http://www.cnitedu.cn

前言:起初,由于对MD规范的盲目依赖,认为设计端的SVG输出都是正确的,于是乎都以为是前端/开发的代码处理问题,没有对iconfont 进行正确的读写,而开发端也确实用了比较粗暴的方式让效果看似没问题了,但却同时引发了更多的问题。

原文标题:IconFont-1PX不对齐引发的'血案'

作者:HeNgrY

大约一年前,写了一篇关于iconfont 如何设计、使用、维护的文章(传送门)。而今天特意再拿iconfont 来写一篇文章,主要是项目实际执行过程中,使用icomoon 生成iconfont 使用时,以MD的设计规范来设计,SVG完全以24x24的模式来生成导出,会产生偏移的问题。

前因

目前项目进入前端组件规范化的过程,而在制作按钮时,发现了图标与文案存在1px不对齐问题,如下图:

iconfont对不齐怎么办_www.epx365.cn

正常应如左侧,对齐;现在应用时却是右侧的情况,icon 往上偏移了。

起初,由于对MD规范的盲目依赖,认为设计端的SVG输出都是正确的,于是乎都以为是前端/开发的代码处理问题,没有对iconfont 进行正确的读写,而开发端也确实用了比较粗暴的方式让效果看似没问题了,但却同时引发了更多的问题。其他iconfont 资源在应用时都不得不进行一些特殊的处理,增加了开发成本。

iconfont对不齐怎么办_www.epx365.cn

在一系列的尝试之后,不得不换个角度来看问题,先排除技术端的可能性,把问题回归到设计端,尝试发现问题。

分析

首先,找到了Google官方在用的Material Design icon的开源iconfont,把其中的SVG放到icomoon 中看看它的图形结构实际应用是不是一致的,如图:

iconfont对不齐怎么办_www.epx365.cn

结果很惊讶,发现官方貌似不是一个做法啊,难道问题出在这里?但随后又发现每一个图形的宽度结构其实都不一样,只有一个共同点,高度统一。但高度统一这一点我们也是遵循规则的啊,而宽度不同会导致上下偏移,逻辑上说不通啊。且现阶段已经有200多的图标,实验的成本太高!结论:此路不通,继续换思路。

假设SVG不是根源问题,那只能把问题转移到生成iconfont 的工具icomoon 上了。而icomoon生成iconfont 是非常简单的,导出时有一些基础的设定,这个在以往确实没有深入去看每一个选项到底代表了什么,都是直接用默认值,死马当活马医的心态下,发现了确实会影响iconfont 对齐问题的选项,如下图:

iconfont对不齐怎么办_www.epx365.cn

Baseline Height - 这个,其实就是在字体设计中的一个对齐基线的设定

再翻出icomoon 的功能说明,其中就有对于这个选项的说明(传送门)

iconfont对不齐怎么办_www.epx365.cn

从图中很明显看出了默认的6.25 是怎么来的,而改变这个数值就会影响icon 在实际应用时的垂直位置。此时简直柳暗花明又一村,基于我们SVG制作的方法,直接把6.25 改为0,测试一下是否对齐了。

iconfont对不齐怎么办_www.epx365.cn

马上让前端测试之后,可见偏移问题已消失,会心一笑 ;p

问题

好吧,其实开心得太早!

在开心满满以为解决问题了,于是乎也把其他2个iconfont 资源也以同样的方法更新,然后让WEB、Android、iOS各平台更新资源。而现实是残酷的,再一次告诉了我不严谨验证的后果,偏移问题仅是其中1个资源解决了,其他2个还是一样!悲剧~到底问题在哪里?明明设置都是一样的啊!

此时,幸运的是,Mobile开发小组长提供了一个便于验证对齐问题的小工具(传送门),把不同iconfont 资源进行同时的对比,正常资源如下:

iconfont对不齐怎么办_www.epx365.cn

而依然存在偏移问题的资源,非常明显,如下图:

iconfont对不齐怎么办_www.epx365.cn

但是从icomoon 导出的设置都一样,且SVG的设计规范也是一致的,到底是什么问题?疯掉~

好吧,冷静,再次针对不同资源的差异化进行分析,突然想到是否有可能是字体范围的渲染机制问题。于是,检查正常资源的库时,发现当时在设计"百度贴吧"的社交icon 时,由于其LOGO的图形特殊性,为了保证线条饱满和符合我们的设计规范,所以整个图形都是铺满整个画布的,如下图:

iconfont对不齐怎么办_www.epx365.cn

抱着怀疑的态度,我把"百度贴吧"的icon 复制到另外的资源中,然后,如图:

iconfont对不齐怎么办_www.epx365.cn

看到这一幕简直要哭了有木有,几经波折啊!小心翼翼让APP开发的同学先更新资源测试一下是否真的解决问题了,回馈是:OK!

好吧,问题到此为止,完美解决。起初只是因为1px 的对齐问题,后面引发了一系列的开发填坑的事情。由此作为设计师不得不反思自身啊,任何工具和方法的使用,没研究透彻就投入项目,发生问题也容易盲目自信,忽略了其真正的原因,共勉!

iconfont对不齐怎么办_www.epx365.cn

来源地址:http://www.epx365.cn/peixun/ui/201947202.html

来源标题:iconfont对不齐怎么办


你也许会喜欢如下的文章?

机构名称:IT培训网 联系手机:13783581536 在线客服:起航学习网客服 在 线 QQ:起航学习网客服 网站域名:http://www.cnitedu.cn

(责任编辑:IT培训网)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片