34

Google Chrome に固有のコードを追加したにもかかわらず、Google Chrome でテキストのアンチエイリアス処理が行われません。

奇妙なことに、私が追加したコードと互換性がないと言われている Firefox は、テキストのアンチエイリアスを適切に行っています。

具体的な CSS スタイルは次のとおりです。

.jumbotron h1 {
    color: white;
    font-size: 100px;
    text-align: center;
    line-height: 1;
    /*
     * Webkit only supported by Chrome and Safari.
     */
    -webkit-font-smoothing: antialiased;
}

クロム：

https://dl.dropboxusercontent.com/u/26438996/guru/guru-chrome.png

ファイアフォックス:

https://dl.dropboxusercontent.com/u/26438996/guru/guru-firefox.png

上記 (およびおそらくWeb サイト) でわかるように、フォントは Firefox で見栄えがよくなります。

4

7 に答える 7

34

この問題に関する大きな回答をここに書きました。Google Chrome に「フォント スムージング」はありますか? . この投稿には、知っておく必要があるすべてのことと、これを修正する方法が含まれています。これは Google Chrome の公式のバグであり、ブラウザの開発者はすでにこの問題を認識しており、修正に取り組んでいます。

つまり、これをテキスト ルールに追加して、フォントの見栄えを良くすることができます。

テキストストローク修正:

-webkit-text-stroke: 1px

また

-webkit-text-stroke: 1px rgba(0,0,0,0.1)

テキストシャドウトリック:

 text-shadow: #fff 0px 1px 1px;

また

 text-shadow: #333 0px 0px 1px; // for black text

font-smoothing-trick (上記と組み合わせて):

-webkit-font-smoothing: antialiased;

注: これらは回避策であり、基本的な問題の実際の修正ではありません。

于 2013-07-25T20:21:38.393 に答える
3

このブログによると: http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/

Chrome 37 で修正される予定です。彼の言うとおりです。Chrome Canary で試してみましたが、うまくいきました。

于 2014-07-17T09:11:34.127 に答える