Question

我有我的website that I am creating here并且它看起来不错（现在CSS3媒体查询不适用于IE）但是我发现我的@font脸部坏了，看起来像Chrome for Windows中的垃圾（到目前为止，这是只有我发现的主要内容。

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

我去了字体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用于Windows，FF 8用于OSX， Safari Opera和它看起来很棒。用于Windows的Chrome对于@font face命令来说效果不佳。

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

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

所以任何帮助都会受到赞赏..

Answer 1

我已经解决了这个问题！首先加载SVG行时，Chrome会喜欢它。只是优先考虑。嗯......有人应该告诉Font Squirrel。

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

e.g。

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＆amp; Goodle Chrome 23.0.1271.64 m并使用FontAwesome作为我的网络应用程序。要在Chrome中为FontAwesome启用消除锯齿，请执行 maximo 表示 - 使用 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

要在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" />

您可以更改上升值并使其与其他字体格式版本匹配。

Answer 5

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

www.typekit.com

它适用于所有现代浏览器，它修复了我对Chrome的讨厌问题，所以我很高兴。无论您的访客观看什么，都需要支付少量费用。开始有问题，联系他们，他们为你解决。几乎任何字体都可以让您高枕无忧。

在Chrome中@font face choppy字体

5 个答案: