错误的字体渲染 - 原因是什么，解决方法是什么？答案

【问题标题】：Bad font rendering - what are the causes, what the workarounds?错误的字体渲染 - 原因是什么，解决方法是什么？
【发布时间】：2014-06-10 03:53:28
【问题描述】：

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

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

Chrome（很糟糕）：

火狐（可怕，我的主怜悯）：

Opera（非常不错，这就是我想要的任何地方）：

Safari（完美）：

我没有在我的 CSS 中指定任何字体渲染或消除锯齿选项；另一方面，我使用normalize.css。

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

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

【问题讨论】：

现在在 Windows 上试用。
我做不到，我只有 Mac :(而且实际上没有虚拟机，但这在待办事项清单上。
很糟糕：stackoverflow.com/questions/11487427/…
好的，在 Chrome 中这是一个错误，但是 Firefox 呢？那里很糟糕。
每个浏览器/操作系统组合都可以有自己的字体呈现方式。如果您绝对必须在任何地方都具有相同的外观，那么唯一的选择是使用图像（但为了便于访问，您需要做一些技巧，例如顶部的不可见文本）或插件（Flash 为您提供了一种一致的字体渲染选项，尽管我强烈建议您不要走这条路）。您可以尝试使用 CSS3 的 text-rendering 属性 (developer.mozilla.org/en-US/docs/Web/CSS/text-rendering)，但它没有得到很好的支持。

【解决方案1】：

我的字体也有同样的问题。
我通过在我的粗体样式元素上应用较少的 mixin 解决了粗体样式的问题：

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

【讨论】：