Open jpotterm opened 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.
Hey @jpotterm, I'm not familiar with fontforge. Can you go into a little more detail on how you made those changes? Thanks.
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
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
@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.
@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
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 about20px
of space between the rectangle and the line. The SVG used in the example is in thesvgs
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.