Firefox IE浏览器渲染字体糟糕，例如Roboto字体

Question

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

的Roboto字体看起来像下面在Firefox和IE（左）和Chrome（右）：

为什么在Chrome看起来不错，但有一个在FF和IE浏览器奇怪的问题？ 如何解决这个问题？

Answer 1

这个解决问题：

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

Tryed通过CSS @import要做到这一点，但没有运气。

Answer 2

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

Answer 3

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

Chrome可能会改变ClearType的默认行为（这可能在Windows 7和更新的我相信）或包括它自己的字体渲染器，如FreeType。我没有意识到强制IE或Firefox更改渲染方法的方法，所以我最好的建议是只使用高质量提示的字体以适合小尺寸。