在Chrome中@font face choppy字体

Question

我有我的网站,我在这里创建,它看起来不错(现在CSS3媒体查询不适用于IE)但我发现我的@font面孔坏了,看起来像Chrome for Windows中的废话(到目前为止,这是唯一的主要一个我发现的).

我已经搜索过了,发现CSS3 rbg修复本应该可以工作,但它对我没有任何作用.保罗爱尔兰的防弹修复然后我的字体在Android中断了.我几个小时以来一直在研究这个问题,但似乎找不到任何可行的方法.我听说过Cufon,但我正试图坚持使用@font face,因为它只是针对Chrome而我遇到了这个麻烦.

我去了字体松鼠并获得了我正在使用的字体的字体工具包,所以它看起来像这样

@font-face {
font-family: 'GeosansLightRegular';
src: url('geosanslight-webfont.eot');
src: url('geosanslight-webfont.eot?#iefix') format('embedded-opentype'),
     url('geosanslight-webfont.woff') format('woff'),
     url('geosanslight-webfont.ttf') format('truetype'),
     url('geosanslight-webfont.svg#GeosansLightRegular') format('svg');
font-weight: normal;
font-style: normal;

}

它适用于大多数浏览器(我再也没有机会测试每一个浏览器,但我已经在IE 6-9上检查过它看起来不错,FF 9用于Windows,FF 8用于OSX,Safari Opera和它看起来很棒.用于Windows的Chrome浏览器与@font face命令不兼容.

有没有人建议我可以做些什么来使它看起来更好或修复它？(除了删除@font face类和使用常规字体.)

另外,我最终可以使用Chrome中的条件评论来查看常规字体但是我的HTML不会验证是吗？

所以任何帮助将不胜感激..

Answer 1

我修好了!首先加载SVG行时,Chrome会喜欢它.只是优先考虑.嗯......有人应该告诉Font Squirrel.

/sf/answers/632889631/

例如

src: url('geosanslight-webfont.eot');
src: url('geosanslight-webfont.eot?#iefix') format('embedded-opentype'),
     url('geosanslight-webfont.svg#GeosansLightRegular') format('svg'),          
     url('geosanslight-webfont.woff') format('woff'),
     url('geosanslight-webfont.ttf') format('truetype');

如果这对您有用,请告诉我.干杯!

(由simoneast编辑:将EOT版本移至顶部,否则会破坏IE.)

Answer 2

经过几个小时的寻找修复后，我找到了一个完美的修复。它需要支付年费，但是如果您是拥有多个网站的网页设计师，那么这是必须拥有的！

www.typekit.com

它适用于所有现代浏览器，并且解决了我使用 Chrome 时遇到的烦人问题，所以我很高兴。无论您的访问者正在观看什么内容，都值得花很少的费用来获得出色的字体。开始遇到问题，请联系他们，他们会为您解决问题。几乎适用于任何字体，让您高枕无忧。