css - @font face chrome 中的断断续续的字体

Question

我有我的 website that I am creating here它看起来不错(现在 CSS3 媒体查询不适用于 IE)但我发现我的@font 脸坏了，在 Windows 版 Chrome 中看起来像垃圾(到目前为止，这是我发现的唯一主要的)。

我搜索了一下，发现 CSS3 rbg 修复应该可以工作，但它对我没有任何作用。 Paul Irish 是否进行了防弹修复，但是我的字体在 Android 中损坏了。我已经研究了几个小时了，但似乎找不到任何有用的东西。我听说过 Cufon，但我试图坚持使用@font face，因为它只适用于 Chrome，我遇到了这个问题。

我去了 font squirrel 并获得了我正在使用的字体的字体套件，所以它看起来像这样

@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 上检查过，它看起来不错，Windows 的 FF 9 和 OSX 的 FF 8， Safari Opera，它看起来很棒。Chrome for windows 只是不能很好地使用@font face 命令。

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

此外，我最终可能会使用 Chrome 的条件注释来查看常规字体，但我的 HTML 无法验证是吗？

因此，我们将不胜感激..

Answer 1

我已经解决了这个问题!当您首先加载 SVG 行时，Chrome 会喜欢它。只需将其优先级提高即可。嗯……应该有人告诉 Font Squirrel。

https://stackoverflow.com/a/9041280/1112665

例如

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。)