3

Chrome での正確なフォント レンダリングに問題があり、ここで誰かがアドバイスを提供できるかどうか疑問に思っています。割り当てられた幅をテキストで正確に埋める必要がありますが、これは簡単な JavaScript で実現しています。

JS はうまく機能し、幅を埋める各スパンに小数の font-size 値を正しく適用し、Firefox/IE で見栄えがします。ただし、Chrome ではフォント サイズが最も近い整数ピクセル値に丸められるため、見た目が非常にむらがあります。

この問題の優れた図は、最近提出された Chromiumの問題で見つけることができます。 この単純なマークアップ サンプルを見ると、Chrome のフォント サイズの丸めがはっきりとわかります。

<html>
    <body>
        <div style='font-size: 10px'>Text Text Text Text</div>
        <div style='font-size: 10.4px'>Text Text Text Text</div>
        <div style='font-size: 10.5px'>Text Text Text Text</div>
        <div style='font-size: 11px'>Text Text Text Text</div>
    </body>
</html>

クローム レンダリング:

クロームのフォントサイズ

Firefox のレンダリング:

Firefox のフォントサイズ

IE9 レンダリング:

IE9 フォント サイズ

明らかに、私がしなければならないことについて私が見つけることができる最良の参照が Chromium issue tracker にあるというのは悪い兆候です...しかし、私は尋ねても害はないと思いました. 誰でも回避策を提案できますか? CSS または JS ソリューションはどちらも問題ありません。これらのフォントをより正確にするものであれば何でも構いません。

4

1 に答える 1

1

私に発生する唯一の回避策は-webkit-transform: scale(x)、例を適用することです：

div[style*="10."]  {-webkit-transform-origin: 0 50%;}
div[style*="10.1"] { -webkit-transform: scale(1.01);}
div[style*="10.2"] { -webkit-transform: scale(1.02);}
div[style*="10.3"] { -webkit-transform: scale(1.03);}
div[style*="10.4"] { -webkit-transform: scale(1.04);}
div[style*="10.5"] { -webkit-transform: scale(1.05);}
div[style*="10.6"] { -webkit-transform: scale(0.96);}
div[style*="10.7"] { -webkit-transform: scale(0.97);}
div[style*="10.8"] { -webkit-transform: scale(0.98);}
div[style*="10.9"] { -webkit-transform: scale(0.99);}

問題は、おそらくテキストを自動調整しているelement.offsetWidthため、スケーリング前に幅が得られることです。スケーリングされた後にそれを取得するには、使用しますelement.getBoundingClientRect().width（ライブラリがすでにこれを処理している場合があります）。ここで実際にこれを見ることができます：

http://jsfiddle.net/Cfd5a/

于 2013-07-19T02:42:11.700 に答える