@ font-face字体在不同浏览器中的模糊效果

Question

我使用以下CSS代码加载我的字体。这是一个外部CSS样式表：

@font-face {
    font-family: 'light';
    src: url('../_fnt/light/gothamrnd-light.eot');
    src: url('../_fnt/light/gothamrnd-light.eot?#iefix') format('embedded-opentype'),
             url('../_fnt/light/gothamrnd-light.woff') format('woff'),
             url('../_fnt/light/gothamrnd-light.ttf') format('truetype'),
             url('../_fnt/light/gothamrnd-light.svg#../_fnt/light/gothamrnd-light') format('svg');
    font-weight: normal;
    font-style: normal;
}

一切都应该很好并且完全可见。我刚刚听说一位朋友从windows 7使用了firefox 15，他得到了一些模糊的图像。我已经看到Windows的任何浏览器都会遇到这个问题。 IE当然也不起作用......（跨浏览器不是最好的......）

模糊效果，firefox 15.0.1：

这是应该看起来的字体（已经从Chrome 23检查过）：

如果您想测试，网站的网址为http://escuderodesign.com/。它是我的投资组合，我真的想至少用Firefox来解决这个问题。

我认为@ font-face就足够了。你能帮我个忙吗？

Answer 1

这是一个字体渲染问题，如果你打开Gotham Rounded的简易版本，你会发现即使是字体浏览器也显示它的大小为12。

所以我认为你有两个基本选择：

1. 使用该字体的常规版本，该版本在浏览器中也显示正常。
2. 使用cufon渲染器。

无论如何，对于我来说，Firefox 16.0.2和Chrome 22.0.1中的字体同样存在缺陷，所以我认为这是一个字体问题。实际上在渲染IE方面对我来说是最好的 - 当然不是布局。

祝你好运！