Webkit, letter-spacing issues with webfonts

偶尔善良 提交于 2019-12-11 08:23:53

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!