1

私は角度のあるマテリアル デザインを使用しているため、Roboto フォントが含まれています。実際には他のフォントもいくつかありますが、同じ問題があります。

Roboto フォントは、Firefox と IE (左) および Chrome (右) で次のように表示されます。

サンプルここに画像の説明を入力

Chrome では見栄えがよく、FF と IE では奇妙な問題が発生するのはなぜですか? この問題を解決するには？

4

3 に答える 3

2

Microsoft の ClearType レンダリング システムは、適切なフォント ヒンティングのない TrueType フォントでは非常に貧弱な結果を生成します (要するに、スケーラブル フォント内に埋め込まれた小さなコード片が、低解像度でも見栄えを良くするために形状を歪めます)。これは、デフォルトでは ClearType が Y 軸にアンチエイリアシングを適用しないためです。Roboto は高 DPI のモバイル デバイス用に設計されているため、高品質のヒントはありません。

Chrome はおそらく ClearType のデフォルトの動作を変更するか (Windows 7 以降で可能だと思います)、FreeType などの独自のフォント レンダラーを含めます。IE や Firefox のレンダリング方法を強制的に変更する方法を私は知りません。そのため、私の最善のアドバイスは、小さなサイズに対して高品質のヒントを持つフォントのみを使用することです。

于 2016-02-12T17:03:31.947 に答える
1

これによって問題を解決します。

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

css @import でこれを実行しようとしましたが、うまくいきませんでした。

于 2016-02-12T17:24:13.020 に答える
0

すべてがブラウザに依存しているという問題を解決することはできません。UI レンダリング エンジンが異なるため、ルック アンド フィールも異なります。

于 2016-02-12T17:01:27.087 に答える