1

素晴らしいフォントに関するいくつかの記事とスタックオーバーフローの質問を読みました。ウェブサイトにうまく実装できましたが、大きな問題が 1 つあります。

ジフィドルはこちら

ここにコードがあります

html:

<i class="icon-th-list font-25em"></i>&nbsp font 2.5em<br/>
<i class="icon-th-list font-2em"></i>&nbsp font 2em<br/>

CSS:

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: subpixel-antialiased;
    font-family: Arial;
}

.font-25em {
    font-size: 2.5em !important;
}

.font-2em {
    font-size: 2em !important;
}

font-size 2em などのアイコンは完全に機能しますが、フォント サイズを 2.5em に変更すると、フォントがぎざぎざになり、見栄えが悪くなります。

私は何か間違ったことをしていますか？

助けてください

4

1 に答える 1

1

どのブラウザーが問題を引き起こしているかについては言及していませんが、ここで何か見栄えが良くなりますhttp://jsfiddle.net/panchroma/mYMnh/ ?

アンチエイリアスを次のように変更しました-webkit-font-smoothing: antialiased;。派手にしたい場合は、アイコンに小さな影を追加して滑らかにすることができます。 

.font-25em {
font-size: 2.5em !important;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

幸運を！

于 2013-09-28T11:56:32.413 に答える