Firefox 和 IE 严重渲染字体，例如 Roboto 字体
Firefox an IE renders fonts badly, eg Roboto font
我使用 angular material 设计，所以里面有 Roboto 字体。其实还有一些其他的字体，但他们有同样的问题。
Roboto 字体在 Firefox 和 IE（左）和 Chrome（右）中如下所示：
为什么在 Chrome 中看起来不错，但在 FF 和 IE 中却有奇怪的问题？
如何解决这个问题？
我们无法解决该问题，这完全取决于浏览器。因为不同的 UI 渲染引擎，外观和感觉也会不同。
Microsoft 的 ClearType 渲染系统在 TrueType 字体上产生的效果非常差，没有很好的字体提示（简而言之 - 嵌入在可缩放字体中的小代码段，扭曲其形状以使其即使在较低分辨率下也看起来不错）。这是因为默认情况下，ClearType 不在 Y 轴上应用抗锯齿。由于 Roboto 是为具有高 DPI 的移动设备设计的，它没有高质量的提示，如果有的话，所以它在较低分辨率的 ClearType 上看起来会很糟糕。
Chrome 可能会改变 ClearType 默认行为（我相信在 Windows 7 和更新版本上是可能的）或包括它自己的字体渲染器，例如 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 做到这一点，但没有成功。
我使用 angular material 设计，所以里面有 Roboto 字体。其实还有一些其他的字体，但他们有同样的问题。
Roboto 字体在 Firefox 和 IE（左）和 Chrome（右）中如下所示：
为什么在 Chrome 中看起来不错，但在 FF 和 IE 中却有奇怪的问题？ 如何解决这个问题？
我们无法解决该问题，这完全取决于浏览器。因为不同的 UI 渲染引擎，外观和感觉也会不同。
Microsoft 的 ClearType 渲染系统在 TrueType 字体上产生的效果非常差，没有很好的字体提示（简而言之 - 嵌入在可缩放字体中的小代码段，扭曲其形状以使其即使在较低分辨率下也看起来不错）。这是因为默认情况下，ClearType 不在 Y 轴上应用抗锯齿。由于 Roboto 是为具有高 DPI 的移动设备设计的，它没有高质量的提示，如果有的话，所以它在较低分辨率的 ClearType 上看起来会很糟糕。
Chrome 可能会改变 ClearType 默认行为（我相信在 Windows 7 和更新版本上是可能的）或包括它自己的字体渲染器，例如 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 做到这一点，但没有成功。