Webfonts rendering differently on Windows, Mac and

问题:

I'm using webfonts for the first time on a website I'm currently making and I noticed that the bounding boxes of the fonts seem to be different on Windows and Linux & Mac (same on Linux & Mac that is). This is not browser dependent as the same versions of Chrome and Firefox on all operating systems have these differences. Basically, on Windows, there is extra space on top of the character, while on Linux and Mac the character's bounding box is much closer to the actual top of the character (and for example umlauts are outside the box). This naturally changes the way positions, margins, etc. behave.

Currently the font is defined like this:

@font-face { font-family: "FranklinGothicHand"; 
    src: url('fonts/franklingothichanddemi-webfont.eot'); 
    src: url('fonts/franklingothichanddemi-webfont.eot?iefix') format('eot'),
        url('fonts/franklingothichanddemi-webfont.woff') format('woff'),
        url('fonts/franklingothichanddemi-webfont.ttf') format('truetype'),
        url('fonts/franklingothichanddemi-webfont.svg#webfontLgJOAlmK') format('svg'); 
} 

Because of this, for example, I can't properly vertically align a decorated initial cap of an article to the first line of the article since its position is different on different operating systems.

Can anyone think of any solution for this?

回答1:

I was looking into this myself the other day and i came upon this site with an explanation of what is going on. http://www.owlfolio.org/htmletc/legibility-of-embedded-web-fonts/ The takeaway i got from the article is that the OS's render the fonts differently and the only real fix is apparently to massage the font itself to make them deal with the different OS rendering styles. Unfortunately editing the actual font is probably not an option i am guessing.

回答2:

Maybe detect the browser with javascript with this plugin (see os.name) http://jquery.thewikies.com/browser/ and then use that to determine which stylesheet you want to load How to load up CSS files using Javascript?

Fonts are really odd between operating systems, it doesn't surprise me that much that the rendering is inconsistent.

回答3:

I just discovered -webkit-font-smoothing: antialiased; -- it seems to do a good job for Safari and Chrome on OSX.