Firefox 和 IE 严重渲染字体，例如 Roboto 字体答案

【问题标题】：Firefox an IE renders fonts badly, eg Roboto fontFirefox 和 IE 严重渲染字体，例如 Roboto 字体
【发布时间】：2016-02-12 16:40:43
【问题描述】：

我使用有角度的材料设计，所以我有 Roboto 字体。 Aclually还有一些其他字体，但它们有同样的问题。

Roboto 字体在 Firefox 和 IE（左）和 Chrome（右）中如下所示：

为什么在 Chrome 中看起来不错，但在 FF 和 IE 中却出现了奇怪的问题？如何解决这个问题？

【问题讨论】：

标签： internet-explorer firefox webfonts roboto

【解决方案1】：

Microsoft 的 ClearType 渲染系统在没有良好字体提示的情况下对 TrueType 字体产生非常糟糕的结果（简而言之 - 嵌入可缩放字体中的小段代码，会扭曲其形状以使其即使在较低分辨率下也看起来不错）。这是因为默认情况下 ClearType 不在 Y 轴上应用抗锯齿。由于 Roboto 是为具有高 DPI 的移动设备而设计的，因此它没有高质量的提示（如果有的话），因此在较低分辨率的 ClearType 上看起来很糟糕。

Chrome 可能会更改 ClearType 的默认行为（我相信在 Windows 7 和更新版本上是可能的）或包含其自己的字体渲染器，例如 FreeType。我不知道有什么方法可以强制 IE 或 Firefox 改变它们的渲染方法，所以我最好的建议是只对小尺寸使用具有高质量提示的字体。

【讨论】：

【解决方案2】：

这样解决问题：

<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700&subset=latin,cyrillic' rel='stylesheet' type='text/css'>

尝试通过 css @import 执行此操作，但没有成功。

【讨论】：

【解决方案3】：

我们无法解决这个问题，这完全取决于浏览器。因为不同的UI渲染引擎的外观和感觉也会有所不同。

【讨论】：

实际上问题不在于颜色，而在于例如“n”顶部的小点