使用@ font-face调用来修复Google Chrome中的字体平滑问题会搞砸Firefox中的字体渲染。为什么？

Question

我正在使用@font-face来尝试解决Google Chrome中的字体平滑问题（如下所示：http://www.adtrak.co.uk/blog/font-face-chrome-rendering/#fix）。

它工作得很好，但是它使Firefox中的字体看起来很糟糕，它曾经用于正确渲染。另一方面，IE 8两种方式都呈现出可怕的方式。

这是我的CSS：

@font-face {
font-family: 'Montserrat';
src: url('../fonts/montserrat-regular-webfont.eot');
src: url('../fonts/montserrat-regular-webfont.eot?#iefix') format('eot'),
url('../fonts/montserrat-regular-webfont.woff') format('woff'),
url('../fonts/montserrat-regular-webfont.ttf') format('truetype'),
url('../fonts/montserrat-regular-webfont.svg') format('svg');
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'Montserrat';
src: url('../fonts/montserrat-regular-webfont.svg') format('svg');
}
}

如何解决此问题？

JSFiddle：http://jsfiddle.net/x4X2f