6

さまざまなブラウザーがさまざまな方法でテキストをレンダリングすることは承知しています。しかし、あるプロジェクトでアイコン フォントの使用を試してみると、特に Firefox がイライラします。

基本的に、@font-face といくつかの疑似クラスを介して表示されるソーシャル メディア アイコンの行があります。ただし、Firefox では適切にレンダリングするのに少し問題があります...

Chrome と Firefox の比較は次のとおりです。

クロム 23.0.1271.101 (Mac)

http://cl.ly/image/0M3t2S3N2A38/

（完全）

Firefox 17.0.1 (マック)

http://cl.ly/image/053d2J0J312K

(完璧ではない)

あなたはおそらく私が抱えている問題を見ることができます...

他のいくつかのブラウザーもチェックして、Firefox だけではないかどうかを確認しました。ただのファイアフォックスです。IEでさえ、より良い仕事をします。

コード：

CSS

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot');
    src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
    url('fonts/icomoon.svg#icomoon') format('svg'),
    url('fonts/icomoon.woff') format('woff'),
    url('fonts/icomoon.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


[class^="icon-"]:before, 
[class*=" icon-"]:before {
    font-family: 'icomoon';
    font-style: normal;
    speak: none;
    font-weight: normal;
    line-height: 1;
    text-align: center;
}


.icon-flkr:before {
    content: "\2b";
}
.icon-fbk:before {
    content: "\2c";
}
.icon-twitter:before {
    content: "\3e";
}
.icon-lfm:before {
    content: "\24";
}
.icon-lkdin:before {
    content: "\25";
}
.icon-inst:before {
    content: "\26";
}

HTML

<ul id="footer_social_list" class="group">
    <li><a href="#" class="icon-twitter" title="Follow me on Twitter"></a></li>
    <li><a href="#" class="icon-fbk"></a></li>
    <li><a href="#" class="icon-lkdin"></a></li>
    <li><a href="#" class="icon-flkr"></a></li>
    <li><a href="#" class="icon-inst"></a></li>
    <li><a href="#" class="icon-lfm"></a></li>
</ul>

私はこれを修正するために多くのことを試しました。CSSで不透明度を変更することから。テキストシャドウを試す。@font-face、クラス、および継承されたスタイルの両方の重みを変更します。「データアイコン」を使用。各アイコンがピクセル グリッドに揃えられていることも確認します。

Firefox ではまだ何も改善されていません。IE9 の Instagram アイコンを除いて、すべてのブラウザーですべてが適切に表示されます。

では、なぜFirefoxはこれを行うのでしょうか? そして、それを動作させるためにできることはありますか?

PS: -webkit-font-smoothing: antialiased; は追加していません。とにかく Firefox に影響するわけではありません。

4

3 に答える 3

5 
-moz-osx-font-smoothing: grayscale;

Firefox 向けのこの新しいベンダー プレフィックス付きソリューションにつながる議論を参照してください。

于 2014-08-13T17:11:25.543 に答える
0

これは、誰も言及していない別の明白な答えです。

あなたが話していることはすべてのブラウザで起こります.暗い背景に明るいテキストを使用すると、テキストはより「重く」見えます. 同じことがアイコンフォントにも当てはまります...細かい部分が膨らんでしまいます。(これを修正するのに役立つ CSS フォント スムージング プロパティとテキスト レンダリング プロパティがありますが、必ずしもすべてのブラウザーで同じように機能するとは限りません。こちらを参照してください。 )

これを回避する方法の 1 つは、(SVG を使用せずに) 明るい円の形状に濃い色のアイコンが必要な場合は、円のないアイコンを使用してから、CSS で独自の円の背景を作成することです。

真のノックアウトは得られませんが (アイコンは実際には円内の負のスペースにはならないため、ボタンの背後にある背景パターンはアイコンを通して表示されません)、明るいテキスト オン ダークは回避できます。 -背景のにじみ。

もちろん、古いバージョンの IE では、border-radius も失われます。

于 2013-09-26T18:53:40.903 に答える
0 
font-weight:normal !important;

これは明白な答えのように思えるかもしれませんが、誰も言及していません。!importantラインに沿ったどこかにアンカータグがあり、通常は再び重み付けされないようにしている可能性が非常に高い.

于 2013-02-22T02:12:13.567 に答える