ウェブキットとサブピクセル値、回避策？

ChromeとSafari（Windows）のようなウェブキットブラウザは、em、数値を一番近いピクセルに丸める傾向がありますが、Firefox、IE、オペラ？サブピクセル値を使用できます。これは通常大きな問題ではありませんが、emを使って文字間隔を正確に調整したり、さまざまなクライアント解像度で一貫した効果を得るためにテキストシャドーを使用すると、頭痛が発生します。次のテストケースを見てください。ウェブキットとサブピクセル値、回避策？

FFでは、最小の文字でも影が残っていますが、Chromeはemの値をゼロに丸め、最初の2つの段落には影がないことがわかります。

EDITこれは単位に関するものではありません。 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>

出典

2011-04-13 Boris Hamanov

私は完全なピクセルデザインには依存しません。彼らはあなたがそれらを達成することができる唯一の方法は、イメージを使用することです... – Blender

私のデザインはすべてですが、ピクセル完璧です。私はどこでもピクセルを使用しません。 –

'em'は' m'の高さと現在のフォントサイズに基づいています。ピクセルに基づいているので、 'em'もそうです。 – Blender

私はemを提案しません。私はpx（ピクセル）を使用します。ここPXコンバータにEMです：http://convert-to.com/446/pixels-px-to-em-conversion.html

PXは、私がお勧めし

出典

2011-04-13 21:16:05 alexy13

ピクセルは画面解像度に相対的ですが、emはフォントサイズに相対的です（フォントサイズはフォント面/ファミリ自体を基準にしています）。また、emからpxへの "コンバータ"は、通常、16px = 1emと仮定することによって、フォントについての1トンを仮定していることに注意してください。 –

800x600で10pxのテキストがどのように見えるのか、1920X1080ではどのように見えますか？とても違う。良い固定ピクセルデザインの時代は過去にあります。 –

私は同意しません。デベロッパーコミュニティの定番であるPaul Irishは、font size _ ** [ここに示すように]（http://na.isobar.com/standards/#_pixels_vs_ems）** _の代わりに、emの代わりにpxを使用します。 –

最初のものは、あなたがフォントとしてy座標と高さの値のためex unitsを使用することである（私の知る限りでは）すべてのブラウザで同じです別のx-heightsを持つことができます。これはかもしれませんあなたの賛成のカーブの丸め誤差を助けるが、おそらくそうではありません。最悪の場合は、フォント自体が少なくとも正確であることです。

第2に、残念ながら私は違いが見られる理由はブラウザがこの場合どのようなものでなければならないと言う仕様の参照を見つけることができませんか？私が間違っていると、Webkitチームにいつもバグを報告できますか？

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

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

出典

2011-04-13 21:32:49

ありがとう！ニース書いても、ユニットが問題かどうかは分かりません。私の編集を見てください。 –

@ avok00：唯一のアドバイスは私の答えです。場合によってはWebkitラウンドが0になることがわかっているので、丸めが発生する可能性がある場合にピクセルを使用するのがおそらく最適なオプションです。 –

実際には非常に低い解像度（電話機）では0.4pxの値が必要です。たとえば、FF/IEで表示される値（1px設定よりも小さく、方法がわからない）、Web-Kitでは表示されません。 –

クロムはテキストとテキストの影をサブピクセルの増分で配置しないので、は最も近いピクセルに丸めます。

letter-spacingと同じ効果が見られます。ここで、firefoxは整数ではない値をピクセルで許可しますが、クロムは最も近いピクセルを丸めます。

出典

2012-10-02 17:45:16 Kostia

ウェブキットとサブピクセル値、回避策？

答えて

関連する問題