Inconsistent appearance in Windows and OSX
Closed this issue · 12 comments
Hi guys,
Just tried to convert some svg icons to font. (ttf, woff)
Everything is perfect in the OSX. Wired thing happened after I switch to a windows(windows 7) device.
All I can got is a block of specific color. It looks like the internal shapes have been removed.
Then I downloaded a font creator in windows and try to edit the TTF/WOFF font files which are generated by gulp-iconfont.
Below are the same font icons, I used the font creator to drag the larger block and put aside.
As you can see, somehow some of the icons have been converted in the wrong way, but in the font file the shapes are still there. These are two overlapping shapes. Below are the svgs' source code.
//The error one
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
<path fill="#faaa43" d="M6.857 0h18.286c3.794 0 6.857 3.063 6.857 6.857v18.286c0 3.794-3.063 6.857-6.857 6.857h-18.286c-3.794 0-6.857-3.063-6.857-6.857v-18.286c0-3.794 3.063-6.857 6.857-6.857z"></path>
<path fill="#fff" d="M26.103 16.526h-0.206c-0.274 2.217-2.126 3.931-4.389 3.931-2.446 0-4.434-1.989-4.434-4.457 0-0.091 0-0.16 0.023-0.251 0 0-0.891-0.571-1.074-0.571s-1.074 0.571-1.074 0.571c0 0.091 0.023 0.16 0.023 0.251 0 2.469-1.989 4.457-4.434 4.457-2.263 0-4.137-1.714-4.389-3.931h-0.206c-0.297 0-0.526-0.229-0.526-0.526s0.229-0.526 0.526-0.526h0.206c0.229-2.217 2.103-3.931 4.366-3.931 2.103 0 3.863 1.486 4.32 3.451l1.006-0.526c0.091-0.046 0.229-0.046 0.32 0l1.006 0.526c0.457-1.989 2.217-3.451 4.32-3.451 2.263 0 4.137 1.714 4.389 3.931h0.206c0.297 0 0.526 0.229 0.526 0.526 0.023 0.297-0.206 0.526-0.503 0.526zM10.514 12.434c-1.943 0-3.543 1.6-3.543 3.566s1.6 3.566 3.543 3.566c1.943 0 3.543-1.6 3.543-3.566s-1.6-3.566-3.543-3.566zM21.486 12.434c-1.943 0-3.543 1.6-3.543 3.566s1.6 3.566 3.543 3.566c1.943 0 3.543-1.6 3.543-3.566s-1.577-3.566-3.543-3.566zM21.486 19.040c-1.669 0-3.017-1.349-3.017-3.040 0-1.669 1.349-3.040 3.017-3.040s3.017 1.349 3.017 3.040c0 1.669-1.349 3.040-3.017 3.040zM22.194 13.691c-0.389 0-0.709 0.32-0.709 0.709s0.32 0.709 0.709 0.709c0.389 0 0.709-0.32 0.709-0.709s-0.32-0.709-0.709-0.709zM10.514 19.040c-1.669 0-3.017-1.349-3.017-3.040 0-1.669 1.349-3.040 3.017-3.040s3.017 1.349 3.017 3.040c-0.023 1.669-1.371 3.040-3.017 3.040zM11.223 13.691c-0.389 0-0.709 0.32-0.709 0.709s0.32 0.709 0.709 0.709c0.389 0 0.709-0.32 0.709-0.709s-0.32-0.709-0.709-0.709z"></path>
</svg>//the right one
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
<path fill="#ffa726" d="M2.612 0h26.776c1.437 0 2.612 1.175 2.612 2.612v26.776c0 1.437-1.175 2.612-2.612 2.612h-26.776c-1.437 0-2.612-1.175-2.612-2.612v-26.776c0-1.437 1.175-2.612 2.612-2.612z"></path>
<path fill="#fff" d="M19.004 22.857c0.947 0 1.731-0.784 1.731-1.731v-9.437c0-0.914-0.784-1.698-1.731-1.698v-0.849h-0.849v0.849h-1.731v-0.849h-0.849v0.849h-1.731v-0.849h-0.849v0.882c-0.947 0-1.731 0.751-1.731 1.698v9.404c0 0.947 0.784 1.731 1.731 1.731h6.008zM18.776 18.939h-5.551c-0.229 0-0.327-0.163-0.327-0.327s0.098-0.327 0.327-0.327h5.551c0.229 0 0.327 0.163 0.327 0.327s-0.098 0.327-0.327 0.327zM18.776 16.653h-5.551c-0.229 0-0.327-0.163-0.327-0.327s0.098-0.327 0.327-0.327h5.551c0.229 0 0.327 0.163 0.327 0.327s-0.098 0.327-0.327 0.327zM18.776 14.367h-5.551c-0.229 0-0.327-0.163-0.327-0.327s0.098-0.327 0.327-0.327h5.551c0.229 0 0.327 0.163 0.327 0.327s-0.098 0.327-0.327 0.327z"></path>
</svg>
Can you give me some advice? Thx.
Can you also give the options you used to create your font ?
Yep, there you go.
return gulp.src(config.icons.paths)
.pipe(iconfont({
fontName: config.icons.fontName,
prependUnicode: true,
timestamp: runTimestamp,
normalize: true,
fontHeight: 1001,
descent: -36
}))Did you tried this ? https://github.com/nfroidure/svgicons2svgfont#optionscenterhorizontally
Just tried, unfortunately it's not working.
had the same problem
return gulp.src([iconSrc + '**/*.svg'])
.pipe(plugins.iconfont({
normalize: true,
fontHeight: 1001,
fontName: 'fxiaokefont'
}))You should check wich font format applies on Windows vs OSX and then try to remove that format and see if the problem persist with another font format.
Also check for your CSS and track windows specific code.
I have no windows 7 device to test but i would merge any PR solving the issue.
@TylerYang 这个问题有解决吗？求助下
暂时还没，还是说英文吧，毕竟这个bug 还比较常见。如果需要的话可以用icomoon 先手动生成，等这个bug 修复完再弄自动化任务。
@nfroidure Did you mean to remove different attributes in svg manually and keep regenerating these 'broken' font to see which attribute/format result in this bug? If so I already did that(Remove all the unnecessary tag or attributes).
The thing is even there is only one attribute d in the path tag, I can still get this massive color block after regenerate these broken svg icons.
Currently this bug is just like a black box to me, and I have no idea of what is going wrong there. I'll be appreciated if you can give me more advices. And I would really like to solve it. : )
It appears i misunderstood your problem. Looks like your icons contains two overlapping shapes. The way gulp-iconfont proceed to merge paths is pretty naive and i think you'd better merge those paths the way you expect with an SVG editor first.
Does it mean that gulp-iconfont do not support multi paths well in svg element?
It is.
Alright then. That's why sometimes the svg-min module can solve this problem. I think it will be useful if we preprocess the icon with module like svg-min.
Anyway, I will try to edit the svg and regenerate today or tomorrow. Thx for your replies. 👍