Internet explorer Firefox IE渲染字体效果不好，例如Roboto字体

我使用角材料设计，所以我有机器人字体。通常还有一些其他字体，但它们有相同的问题

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

为什么Chrome看起来不错，但FF和IE却有那么奇怪的问题？

---

如何解决这个问题？

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

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

---

Chrome可能会改变ClearType的默认行为（我相信在Windows7和更高版本上是可能的），或者包括自己的字体渲染器，比如FreeType。我不知道有什么办法可以强迫IE或Firefox改变它们的呈现方式，所以我的最佳建议是只对小尺寸使用高质量提示字体。

通过以下方法解决问题：

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

---

css@import尝试了这一点，但没有成功。

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