@font-face on Chrome 16 in Windows 7 looks like so

问题:

The problem

How it should look (Chrome 16 on a Mac).

http://demo.ddesign.si/temp/so-font/font-correct.png
How it looks (Chrome 16 on Windows 7)
http://demo.ddesign.si/temp/so-font/font-normal.png
How it looks with bigger font-size http://demo.ddesign.si/temp/so-font/font-big.png

Description

I'm using Font Squirrel's generator for my css code.

font-family: 'Conv_Gotham-Light';
  src: url('fonts1/Gotham-Light.eot');
  src: local('☺'), 
       url('fonts1/Gotham-Light.woff') format('woff'),
       url('fonts1/Gotham-Light.ttf') format('truetype'),
       url('fonts1/Gotham-Light.svg') format('svg');

Tried solutions

I tried many solutions (replacing font order (svg on top), adding text shadow, adding -webkit-text-stroke, -webkit-font-smoothing, etc.), but none of them worked.

What files are requested?

It works correctly on IE 9 on Windows 7. I've searched through apache logs and found out that IE on Windows requests the .woff file, but Chrome 16 on Windows 7 requests .ttf file and after the "svg fix" requests .svg and .ttf.

What now?

So what is going on and how can I fix this?

回答1:

It's because the font is missing hinting, as already noted. Mac OS always strips away the hinting data anyway, as its rasterizer "auto-hints" the font itself.

However, there is a great little software which uses the automatic hinting of FreeType and embeds the data into the file, i.e. it auto-hints the font for you.

See here: http://www.freetype.org/ttfautohint/

回答2:

The font is missing hinting. When fonts in Windows have chunks missing or added, you can usually blame the TTF hinting. Run the font through the Font Squirrel Generator and it should fix your problem.