14

アイコンを使用しています。Chrome と Opera では問題なく表示されます。しかし、Firefox を試してみると、アイコンが 20 ピクセル未満の場合はかなりぼやけて見えfont-sizeますが、30 ピクセルを超えると滑らかに見えます。これを修正する方法はありますか？
たとえば、画像のサイズ変更によって画像がぼやけるという Firefox の問題は、画像をごくわずかに回転させることで修正できます。フォントアイコンにも同様のことが適用できますか?

どのように見えるかを確認するには、(firefox を使用して) アイコンのある Web サイト (font awesome など) に移動し、サイズを 20px に変更してみて、どれだけぼやけているかを確認してください。

4

3 に答える 3

14

この問題は、ブラウザが使用するフォント レンダリングに起因しています。プラットフォームが異なれば、使用する方法も異なります。ブラウザーは、OS メソッドまたは独自の実装を使用することを選択します。

Chrome の方が見栄えが良いのは、Windows で Chrome が ClearType をサブスクライブしていないためです。IE と Firefox の両方で使用されます (これを確認するには、[スタート] -> [ClearType テキストを調整] を選択し、オンとオフを切り替えて違いを確認します)。ただし、Mac および Linux 上の Firefox は、Windows のみのテクノロジであるため、そこでは使用しません。

Chrome は、ClearType を使用せず、3 つのプラットフォームすべてでDirectWriteを使用するため、この特定の問題で優勢です。これは、使用している OS に関係なく、Chrome ですべてが同じように見えることを意味します。

なぜこれが重要なのですか？ユーザーのコンピューターを制御できないためです。ClearType を強制的にオフにすることはできません。また、ユーザーの ClearType 設定を変更することもできません。いずれにせよ、ユーザーは ClearType 設定を変更して、それをtext-shadow機能させるために使用する可能性のある細かい詳細を台無しにする可能性があります。

これにはcufonを使用すると運が良くなるかもしれませんが、それは決して確実なことではありません.

私が求める解決策は、これらのアイコンに画像を使用することです。そうすれば、アイコンを表示するために何を使用していても、誰にとっても同じであることを確実に知ることができます.

于 2015-01-22T12:42:14.910 に答える
2

OS X の適切な修正方法は、テキスト レンダリングとスムージング プロパティを使用することです。

body {
 text-rendering: auto;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

これは、Web フォントに関してもうまく機能します。

于 2015-01-26T19:29:58.920 に答える
0

Google フォントを使用するとフォント スタイルがオーバーライドされ、フォントが太字に表示されることがあることがわかりました。このコンボは私にとってはうまくいきました。

.element {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal !important;
}
于 2015-01-28T22:44:01.157 に答える