@font 在 Chrome 中面对断断续续的字体

Question

我有我的 我在这里创建的网站，它看起来不错（现在 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 看起来不错，FF 9 for Windows 和 FF 8 for OSX，Safari Opera 看起来很棒，Windows 版 Chrome 不能很好地使用 @font face 命令，

有没有人能给我一些建议 。做让它看起来更好或者修复它？（除了删除 @font 字体类并使用常规字体。）

另外，我最终可以使用 Chrome 的条件注释来查看常规字体，但我的 HTML 不会 ..

所以任何帮助将不胜感激

Answer 1

我已经解决了这个问题！ Chrome 喜欢先加载 SVG 行。只需将其优先级提高即可。嗯...应该有人告诉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。）

Answer 2

我为我的案例找到了另一个简单的解决方案。

我有 Microsoft Windows 7 SP1 和Goodle Chrome 23.0.1271.64 m 并在我的网络应用程序中使用 FontAwesome 。要在 Chrome 中启用 FontAwesome 的抗锯齿功能，只需删除如 ma​​ximo 所说的操作 - 使用 svg 字体开始 src 定义，但也要删除之后的字体名称svg 哈希值。简单地将其转换为：

@font-face {
  font-family: "FontAwesome";
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'),
       url('../font/fontawesome-webfont.woff') format('woff'),
       url('../font/fontawesome-webfont.ttf') format('truetype'),
       url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}

转换为：

@font-face {
  font-family: "FontAwesome";
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'),
       url('../font/fontawesome-webfont.svg') format('svg'),
       url('../font/fontawesome-webfont.woff') format('woff'),
       url('../font/fontawesome-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

有帮助吗？

（由 simoneast 编辑：将 EOT 版本移至顶部，否则会破坏 IE。）

Answer 3

webkit 支持 CSS3 属性“font-smooth”。你尝试过吗？

Answer 4

要让 webfonts 在 Windows 上的 Chrome 中呈现良好的抗锯齿效果，您需要在字体声明中使用此格式：

@font-face {
    font-family: 'Futura';
    src: url('futura.eot');
    src: url('futura.eot?#iefix') format('embedded-opentype'),
         url('futura.woff') format('woff'),
         url('futura.ttf') format('truetype'),
         url('futura.svg#futura') format('svg');

    font-weight: normal;
    font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'Futura';
        src: url('futura.svg#futura') format('svg');
    }
}

基本上，您需要强制 Chrome 使用 SVG 字体格式。您可以通过将 .svg 版本的 url 移至顶部来实现此目的，但是 Windows 上的 Chrome 在执行此操作时会出现布局混乱的问题（直至版本 30）。通过使用媒体查询覆盖字体声明，这些问题就得到了解决。

另外：有时 OpenType 字体和 SVG 字体之间的基线位置不匹配，但您可以通过简单地编辑 SVG 字体文件来调整这一点。 SVG 字体是基于 xml 的，如果您查看声明，

<font-face units-per-em="2048" ascent="1900" descent="-510" />

您可以更改 ascent 的值并使其匹配其他字体格式版本。

Answer 5

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

www.typekit.com

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