@font 在 Chrome 中面对波涛汹涌的字体

Question

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

我已经对其进行了搜索，发现应该可以工作的 CSS3 rbg 修复程序，但它对我没有任何帮助。 Paul Irish 做了防弹修复，但是我的字体在 Android 中中断了。我已经研究了几个小时，但似乎找不到任何可行的方法。我听说过 Cufon，但我正试图坚持使用 @font face，因为我遇到了这个问题。

我去了字体松鼠，得到了我正在使用的字体的字体套件，所以它看起来像这样

@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 面类和使用常规字体。）

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

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

Answer 1

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

Answer 2

我已经解决了这个问题！当您首先加载 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。）

Answer 3

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

www.typekit.com

它适用于所有现代浏览器，它解决了我对 Chrome 的讨厌问题，所以我很高兴。无论您的访问者正在查看什么内容，拥有出色类型的小笔费用都是值得的。开始有问题，联系他们，他们会为您解决。几乎任何字体都可以安心使用。

Answer 4

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

我有 Microsoft Windows 7 SP1 和 Goodle Chrome 23.0.1271.64 m 并在我的 Web 应用程序中使用 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 5

要让 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 的值并使其与其他字体格式版本匹配。