Firefox和IE渲染字体很糟糕，例如Roboto字体

Question

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

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

为什么在Chrome中看起来不错但在FF和IE中有这些奇怪的问题？ 如何解决这个问题？

Answer 1

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

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

Answer 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做到这一点，但没有运气。

Answer 3

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