糟糕的字体渲染 - 原因是什么，解决方法是什么？

Question

我正在建立一个网站，大量使用 Bebas Neue 字体。正如我经常做的那样，我让FontSquirrel为我做了肮脏的工作，我直接从Bebas Neue page下载了预构建@font-face。

我直接在我的网站上导入了下载的样式表+字体。我得到的是在Chrome和Firefox等大浏览器中非常糟糕的字体渲染。 这是一堆屏幕截图：

Chrome（非常糟糕）：

Firefox（可怕，我的主人怜悯）：

Opera（非常体面，这就是我想要的无处不在）：

Safari（完美）：

我没有在CSS中指定任何字体渲染或反别名选项;另一方面，我使用normalize.css。

这种可怕渲染的原因是什么？

注意：我已经为一个问题发布了太多的图片，但我也使用了Grand Hotel字体而且上帝，情况更糟（但是每个浏览器都表现一致，至少）。

Answer 1

我的字体也有同样的问题 我修复了粗体样式的问题，在我的粗体样式元素上应用了较少的mixin：

.font-smoothing {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}