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

【问题标题】：@font-face font blurry effect in different browsers@font-face 字体在不同浏览器中的模糊效果
【发布时间】：2012-10-28 12:36:32
【问题描述】：

我使用以下 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 就足够了。你能帮我解决这个问题吗？

【问题讨论】：

标签： internet-explorer firefox fonts cross-browser font-face

【解决方案1】：

这是字体渲染问题，如果你打开轻量版的 Gotham Rounded，你可以看到即使是字体浏览器也显示为 12 的大小。

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

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

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

祝你好运！

【讨论】：

普通版是什么意思？你的意思是.ttf？从未听说过 cufon 渲染器。我会试一试的！
是的，我指的是您还嵌入的普通版本：@font-face { font-family: 'book'; ... } 当然，这看起来和现在的有点不一样。如果你坚持现在的字体，请查看 cufón 渲染。