search

FontCustom / fontcustom

Generate custom icon webfonts from the comfort of the command line.
3.29k stars 423 forks source link

Incorrect vertical position in Internet Explorer #197

Open jpotterm opened 10 years ago

jpotterm commented 10 years ago

Icons do not have the same vertical position in Internet Explorer that they have in other browsers. The bigger the font size, the more dramatic this difference is. This makes it impossible to precisely position icons vertically (without browser detection) because if you shift it to be correct in Chrome, then it will be too high in IE.

This is best shown with an example: https://drive.google.com/file/d/0BzJu4mUjQTnuaWtPNlAzdi1XNkU/edit?usp=sharing. If you open index.html you will see that in Chrome the rectangle is sitting on the red line, but in IE there is about 20px of space between the rectangle and the line. The SVG used in the example is in the svgs folder.

I tested the same SVG on Icomoon and that gives consistent cross-browser behavior, so maybe comparing the font files produced by fontcustom and icomoon will help get to the bottom of this. The icomoon fonts are in fonts/icomoon.

I've tested this in Chrome, FF, and IE 9-11. If you need any more information, let me know.

jpotterm commented 10 years ago

In one case, going into Font Forge and changing the OS/2 Version to 3 and setting HHead Line Gap to 0 seemed to fix things, but that didn't seem to work for every font. Hopefully that's helpful.

mike-engel commented 10 years ago

Hey @jpotterm, I'm not familiar with fontforge. Can you go into a little more detail on how you made those changes? Thanks.

apflieger commented 10 years ago

Any updates on this issue ? the example seems not to be accessible anymore. I might have the same problem, icons are aligned to the top on IE and aligned on the baseline in chrome/firefox

apflieger commented 10 years ago

Well, i found a workaround. I removed the whitespace on top and bottom of the icons. The alignement is better, but still not the same on IE

jpotterm commented 10 years ago

@mike-engel Font Forge is an open source font editor: http://fontforge.org. I installed it through homebrew on mac. After installing it, just open it and open the TTF font in it. Then select "Element > Font Info" from the menu and edit the appropriate fields. Let me know if you need more of a description.

@apflieger Yeah, that sounds like the same issue. I uploaded my original example to a more permanent location and updated the link.

puzrin commented 8 years ago

@jpotterm https://www.microsoft.com/typography/otspec/os2.htm#fst bits 0-2 are exclusive. Probably, setting those to 3 will make font invalid & use woff instead.

Could you try to set ONLY hhea lineGap to 0? With svg2ttf you will need to patch this line https://github.com/fontello/svg2ttf/blob/master/lib/ttf/tables/hhea.js#L14