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拼出的字体填充有误或无法填充的原因

资料:

对比:Inline SVG vs Icon Fonts

如何用svg:SVG symbol a Good Choice for Icons

工具:svg for everybody

坑以及建议:5 Gotchas You’re Gonna Face Getting Inline SVG Into Production MDN svg

results matching ""

    No results matching ""