iconfont vs svg
背景
我们发现用gulp-iconfont编译出来的字体和普通字体在一行不能垂直居中对齐。排除了svg大小,svg画的位置,before伪类的影响,仍无法准确定位。 于是我们换了一种方式,希望用svg解决问题,然而发现gulp-svgstore在拼svg文件的时候也不尽如人意。
结论
目前没有结论!
因为都存在”未解决“的问题: iconfont: 文字如何定位,为何应用编译的字体存在问题 svg:gulp-svgstore到底如何编译svg,降级方案
http://jsbin.com/tufurunuru/edit?html,css,output 栗子
相关概念
字体相关
行框与行内框的关系
行高与行内框的关系,对行框的影响
image元素为何与父元素的大小不一致
vertical-align的正统用法
基线等字体概念
svg相关
svg的使用,path,use...
如何填充颜色,fill,stroke
和设计师合作的建议
如何降级,具体的实现方案
gulp-svgstore拼出的字体填充有误或无法填充的原因
资料:
如何用svg:SVG symbol
a Good Choice for Icons
坑以及建议:5 Gotchas You’re Gonna Face Getting Inline SVG Into Production MDN svg