HTML/CSS Fonts: Different browsers/OSs different r

问题:

I've been working on my website and I'm using font squirrel to generate some web fonts for the website, but currently I've this differences:

Google Chrome OSX

Google Chrome Windows

Firefox OSX

Firefox Windows

Internet Explorer

Is there a way I can "hack" the fonts under windows so they will look more the ones under OSX? Thank you.

回答1:

Different systems render fonts differently. There is mostly nothing you can do about it. You can just live with it: check that on major systems (Windows, Mac, Linux, maybe some mobile systems too) the rendering is acceptance. They cannot and need not be the same. But if you get unacceptable results on some platform, change the font (though sometimes just changing font size, maybe even 1px larger, may help).

The issue is described e.g. at http://www.owlfolio.org/htmletc/legibility-of-embedded-web-fonts/ and in much more detail (and more technically) at http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/

In principle, though, differences might also be caused by different typographic settings. Firefox nowadays applies kerning and common ligatures by default, other browsers don’t. But you probably won’t see such effects, for two reasons: free fonts usually don’t have ligatures or kerning pairs, and Lorem ipsum text usually does not contain character pairs where they would matter (e.g., “fi” or “To” or “Va”). Anyway, the typographic settings can be affected to a considerable degree using the CSS property font-feature-settings (or, rather, that property with various browser prefixes).

回答2:

The main difference here is not between browsers but between operating systems, this is pretty standard.

回答3:

I think there is no hack for this problem because there are drastic differences from browser to browser on how the actual rendered text looks.

回答4:

Please note that Windows also has ClearType. Changing its settings have an influence as well (in Windows 7 it is a 4-step wizard).

The reason I mention this is that Windows has a native way to change font appearance and everyone will see it differently according to their ClearType settings. I don't think browsers change much but OS definitely do. Then there's monitor and resolution as well...

Don't be overly obsessed with making things look the same way on every system. You just cannot do that, whatever you try, and it's totally unnecessary.