1

私は自分のサイトでカスタムフォントを使用しています。

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

脈動するCSS3アニメーションをテキスト要素に適用すると、フォントのレンダリング方法が変わるようです。

この比較画像を参照してください。

ここに画像の説明を入力してください

これはSafariでレンダリングされました。

私はこのQ/Aを見つけました：無関係なアニメーションが実行されているときにSafariがフォントの重みを変更する

そこに書かれていることによると、アニメーションが適用されると、レンダリングはGPUによって行われます。リンクのQ/Aで問題は影響を受ける要素以外の要素に焦点を当てていますが、私の場合は実際の要素が影響を受けます。

質問は：

アニメーションを使用するかどうかに関係なく、ページ全体で正確な（統一された）フォントレンダリング品質が得られるように、この動作をオフまたは変更することはできますか？

4

1 に答える 1

1

完璧な解決策はありませんが、追加-webkit-font-smoothing: antialiased;してみて、それが役立つかどうかを確認することができます。少し薄いフォントになるかもしれませんが、少なくとも統一されます。

編集- 申し訳ありませんが、リンク先のQ/Aに「アンチエイリアス」修正が投稿されているのを見ました。

影響を受ける要素に追加-webkit-backface-visibility: hidden;すると役立つ場合もありますが、その理由はよくわかりません。

-webkit-transform: translate3d(0,0,0);上記の修正のように、ハードウェアアクセラレーションを強制してフォントを統一するが、わずかに薄くする方法を試すこともできます...

お役に立てば幸いです。

于 2012-12-28T18:47:44.950 に答える