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更改渲染方法的方法，所以我最好的建議是隻使用高質量提示的字體以適合小尺寸。