I just discovered that letter-spacing doesn't always work in webkit (and perhaps other browsers?) when embedding fonts. I've tried it on two different fonts and received different results.
"League Gothic Regular" will work
http://www.theleagueofmoveabletype.com/fonts/7-league-gothic
"Quicksand Light" will not
http://www.fontsquirrel.com/fonts/Quicksand
What's the skinny? Is there a way to force the hand of non-compliant fonts?
Quick note: Firefox does seem to apply to both fonts.
I'm not sure I have the answer but I was having a word-spacing problem with League Gothic from Font Squirrel, I couldn't figure it out until I re-generated the font-face stuff on the site using different settings. I use the Paul Irish's Bulletproof method...
Font Squirrel settings http://img59.imageshack.us/img59/8784/screenshot20100428at132.png
I had the same problem, and I was able to clear it up using this code:
@font-face {
font-family: 'League Gothic';
src: url('/assets/fonts/league_gothic-webfont-webfont.eot');
src: local('‚ò∫'),
url(data:font/woff;charset=utf-8;base64,/* base64-encoded font here */) format('woff'),
url(data:font/truetype;charset=utf-8;base64,/* base64-encoded font here */) format('truetype'),
url('/assets/fonts/league_gothic-webfont-webfont.svg#webfontu5sqNtGI') format('svg');
font-weight: normal;
font-style: normal;
}
This was mostly generated from FontSquirrel and then modified slightly (I removed the local() stuff and substituted the junk characters).
This cleared up my letter-spacing issues.
It seems to me that this is caused only by svg fonts!!! I wasn't able to verify it strictly but my test cases prove that much.
Reorder your font-face urls putting svg format last, it should fix the problem. But svg fonts won't get used and rendering might be dirty(er)
来源：https://stackoverflow.com/questions/2690815/font-face-and-letter-spacing-in-webkit