火狐和IE9在Windows上错误渲染字体

Question

我在我的网站上使用了Bitter网络字体。最初我是从Google Web Fonts嵌入它的，但是Google Chrome/Win没有正确地呈现.woff文件（在较小的尺寸下有奇怪的锯齿状伪像）。经过一番搜索，我发现Chrome/win通常会遇到这种格式的问题，而使用SVG可以解决这个问题。这意味着我必须自己托管/嵌入文件，而不是使用Google Web Fonts。我使用Font Squirrel获取了适当的@font-face代码，一切似乎都很好，直到我在Windows上测试IE9/Firefox时。两个浏览器都将大写字母T渲染得比其他大写字母小（就像这样http://d.pr/i/LIty）

以下是我的字体代码：

@font-face {
    font-family: 'bitter';
    src: url('fonts/bitter-regular-webfont.eot');
    src: url('fonts/bitter-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/bitter-regular-webfont.svg#bitterregular') format('svg'),
         url('fonts/bitter-regular-webfont.ttf') format('truetype'),
         url('fonts/bitter-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bitter';
    src: url('fonts/bitter-bold-webfont.eot');
    src: url('fonts/bitter-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/bitter-bold-webfont.svg#bitterbold') format('svg'),
         url('fonts/bitter-bold-webfont.ttf') format('truetype'),
         url('fonts/bitter-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Bitter';
    src: url('fonts/bitter-italic-webfont.eot');
    src: url('fonts/bitter-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/bitter-italic-webfont.svg#bitteritalic') format('svg'),
         url('fonts/bitter-italic-webfont.ttf') format('truetype'),
         url('fonts/bitter-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

据我理解，浏览器会使用它们可以接受的第一个文件格式，然后忽略其余的文件。如果我记得正确，那么意味着IE使用EOT，Chrome使用SVG，Firefox使用TTF。所以一开始似乎实际的文件出了问题，但是在Mac上Firefox却可以很好地渲染字体。

您可以在http://dev.thesmackpack.com上实时查看。有什么方法可以修复字体文件，或使它们使用正确的格式，或其他方法吗？

编辑：我从原始创建者那里下载了字体副本，并通过Font Squirrel生成器运行它，取消所有修改文件的选项。 T已经修复，但现在FF和IE中出现了糟糕的渲染伪影。http://d.pr/i/5sVT

- Ryan Giglio

Answer 1

很遗憾，我未能找到足够的解决方案来解决这个问题。我切换回了谷歌网页字体版本（带有锯齿状伪像但不会出现字母大小失调），并改变了字体大小以最小化伪像（它们在某些大小下更加明显）。虽然这仍不是很完美，但已经尽力了。

这里需要学习的课程： 在开始开发之前，请在所有浏览器和所有操作系统上测试您的网页字体的所有大小。

- Ryan Giglio