@font-face and letter-spacing in webkit

问题

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.

回答1:

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

回答2:

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.

回答3:

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