问题
Here's my issue. Using a Google Webfont called "PT Sans Narrow" on a site project. To preface, FF and IE are showing it perfectly. Webkit browsers are a bit of another story though, the font loads correctly but when I combine it with a "letter-spacing: -.05em" I get a brief text load where i see the webfont w/o the kerning - sticks there for a fraction of a second and then refreshes itself to the final correctly kerned look. I can describe it as more of a "slingshot" effect than anything - if that makes sense?
I am using the .wf-loading script to make sure that there is no FOUT.
this is my CSS
.sansNarrow {font-family: 'PT Sans Narrow', sans-serif; letter-spacing: -.05em; font-weight: bold;}
and I'm just calling the class "sansNarrow" where I need it in my HTML
My question is has anyone else had this issue, and has a viable fix been found?
I've tried creating a jquery function that makes ".sansNarrow" appear/fade-in after 300ms after pageload, but it relies on setting the original class to "display: none" and isn't a viable option if JS is turned off.
Thanks in advance!
回答1:
It seems that the Webkit browsers don't take letter-spacing
lower than -0.07em
for PTSans...
Check this page, might be helpful:
@font-face and letter-spacing in webkit
来源:https://stackoverflow.com/questions/9913305/webkit-letter-spacing-issues-with-webfonts