0

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

4

1 回答 1

2

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

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

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

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

祝你好运！

于 2012-11-08T10:35:15.740 回答