5

Chrome や Safari (Windows) などの Web キット ブラウザーは、em 値を最も近いピクセルに丸める傾向があることに気付きましたが、Firefox、IE、? オペラ？サブピクセル値を使用できます。これは通常は大きな問題ではありませんが、em を使用して文字間隔を正確に揃えたり、さまざまなクライアントの解像度で一貫した効果を得るためにテキスト シャドウを使用したりすると、頭痛の種になります。次のテストケースを見てください。

FF では最小の文字にもまだ影があることがわかりますが、Chrome では em 値がゼロに切り捨てられ、最初の 2 つの段落には影がありません。

編集これはユニットに関するものではありません。0.03em を 0.9、0.8、0.7 .. pxに置き換えると、 FF はますます小さな影を表示しますが、Chrome が 1px を下回ると、突然何も表示されなくなります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="bg" xml:lang="bg" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <style type="text/css">body {font-size: 18px;} p {color: cyan; text-shadow: -0.03em -0.03em 0 rgb(0, 0, 0);}</style>
</head>
<body>

<p style="font-size:1em">No Shadow Test</p>
<p style="font-size:1.5em">No Shadow Test</p>
<p style="font-size:2em">Test</p>
<p style="font-size:2.5em">Test</p>
<p style="font-size:3em">Test</p>
<p style="font-size:3.5em">Test</p>
<p style="font-size:4em">Test</p>
<p style="font-size:4.5em">Test</p>
<p style="font-size:5em">Test</p>

</body>

</html>
4

3 に答える 3

3

最初にお勧めするのは、フォントが別のx-heightsを持っている可能性があるため、y 座標と高さの値にex単位を使用することです。これは、曲線の丸め誤差を有利にするのに役立つかもしれませんが、おそらくそうではありません。最悪のケースは、少なくともフォント自体に対して正確であるということです。

第二に、残念ながら、この場合にブラウザーが何をすべきかを示す仕様の参照が見つからないため、違いが見られますか? 私が間違っていたら、いつでも Webkit チームにバグを報告できますか?

解決策として、この場合の最適なパスを決定することをお勧めします。IE がサポートしていないのと同じように考えてくださいtext-shadow。丸めに失敗すると表示されません。そして、このスタンスに基づいてデザインを決定してください。

私が個人的に行っているのは、影や境界線など、丸め誤差が発生する可能性が高いとわかっているものにピクセルを使用することです。

于 2011-04-13T21:32:49.197 に答える
3

問題は、クロムがサブピクセルの増分でテキストとテキストの影を配置しないため、最も近いピクセルに丸められることです。

letter-spacingFirefox では整数以外の値をピクセル単位で許可し、Chrome では最も近いピクセルを丸める場合と同じ効果が見られます。

于 2012-10-02T17:45:16.927 に答える
0

私はそれらをお勧めしません。px (ピクセル) を使用します。EM から PX へのコンバーターは次のとおりです: http://convert-to.com/446/pixels-px-to-em-conversion.html

PXはすべてのブラウザで同じです（私の知る限り）

于 2011-04-13T21:16:05.310 に答える