Webkit，Webfonts的字母间距问题 [英] Webkit, letter-spacing issues with webfonts

问题描述

这是我的问题.在站点项目上使用名为"PT Sans Narrow"的Google Webfont.开头，FF和IE完美地展示了它. Webkit浏览器是另外一回事了，字体可以正确加载，但是当我将其与"letter-spacing:-.05em"结合使用时，我得到了一个简短的文本加载，其中我看到了不带字距调整的webfont-坚持在那里不到一秒钟的时间，然后刷新为最终的正确字距外观.我可以说它比任何东西都更像是一种弹弓"效果-如果有意义的话?

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?

我正在使用.wf-loading脚本来确保没有FOUT.

I am using the .wf-loading script to make sure that there is no FOUT.

这是我的CSS

.sansNarrow {font-family: 'PT Sans Narrow', sans-serif; letter-spacing: -.05em; font-weight: bold;}

而我只是在需要HTML的地方调用类"sansNarrow"

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?

我尝试创建一个jQuery函数，使页面加载后300毫秒后显示/淡入".sansNarrow"，但是它依赖于将原始类设置为"display:none"，如果使用JS，则不是一个可行的选择已关闭.

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.

提前谢谢！

推荐答案

对于PTSans，Webkit浏览器似乎不会将letter-spacing的价格低于-0.07em的价格...

It seems that the Webkit browsers don't take letter-spacing lower than -0.07em for PTSans...

检查此页可能会有所帮助:
@webkit中的字体和字母间距

Check this page, might be helpful:
@font-face and letter-spacing in webkit

这篇关于Webkit，Webfonts的字母间距问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！