2011-10-18 14 views
30

私はこの問題に遭遇しましたが、ユーザーがテキストを読みやすくする必要があるため、1pxの文字間隔を使用しましたが、醜いので、半画素を0.5px、それは動作しません、私はemの属性を使用してみましたが、タスクを達成していない。css letter-spacingを作る方法はありますか?0.5 px?

ので、サブピクセルサイズは合法です

+1

[font-hinting](http://en.wikipedia.org/wiki/Font_rasterization)でピクセルアライメントの問題が発生している可能性があります。おそらく半ピクセルシフトしているでしょうが、フォントラスタライザはテキストをピクセル境界に再整列しています。 0.5pxの効果は、OSとブラウザとブラウザとの間で合理的に異なる可能性があります。 – Phrogz

+0

これはGoogleの検索結果のトップですので、仲間のルーキーを助けるために、2013年末現在、すべての主要なブラウザで部分文字間隔がサポートされています。 –

答えて

17

このバグは、2008年に戻って報告されていると確認されました。だから、誰かがWebkitにハッキングして、多くのデザイナーを幸せにするような気がするなら。

https://bugs.webkit.org/show_bug.cgi?id=20606

+0

パッチが最終的にWebkitに着いたように見えます!そしてChrome/blinkはしばらく前に修正されました。だから私たちは本当にすぐに部分的な文字間隔を安全に使うことができます。 – idFlood

+0

Safariでまだ動作していません... –

+0

私は最新のSafari(8.0)でテストしましたが、現在は動作しています:) – idFlood

1

手紙半画素間隔(可能な場合は、クロスブラウザのソリューション)を作るための方法がありますが、それらはブラウザ間で予期しない結果を持つことができます。テキストのようなものもまた、ピクセル全体にアライメントしようとします(Phrogzの説明のように)結果として生じる丸め誤差によって、物が不均一に見える可能性があります。

+2

[CSS2仕様](http://www.w3.org/ TR/1998/REC-CSS2-19980512/text。html#spacing-props)スペースの量は、** "**文字の間のデフォルトのスペースに加えて_"です。余分な0.5pxを持つことは妥当で読みやすい欲望です。 – Phrogz

+0

それでは、間違って答えから削除されました。 – Toomai

6

サブピクセルの文字間隔はFFではうまく動作しますが、WebKitではうまく動作しません(少なくともWindowsでは)。このテストケースを参照してください。
http://jsfiddle.net/fZYqL/2/

このテストでは、サブピクセルリテラル値が問題ではないことも示されています。小文字のemを使用すると、1px未満の文字間隔になる値もWebkitでは認識されませんが、Firefoxでも同様に機能します。

Firefox versus Webkit

2

@Zach日時:端数ピクセル。物理的には存在しませんが、透明性と色の変化によってデジタルでシミュレートされます。良い例はアイコンとタイプのセリフです。非常に細い線であるように見えるものをよく見てみると、目を欺くような明るい色の線を描くことによって模擬されることがすぐに分かります。したがって、それらが存在しないときでさえ、グラフィックソフトウェアは、長い時間以来、適切に小数画素を扱ってきた。 Webkitブラウザがまだそれをしないのは残念です。

Re:分数文字間隔。 webkit以外のブラウザ(IEのための名言は一度)でうまく動作します。 Webkitブラウザでは、文字間隔は最も近い整数に丸められます(丸められていると思います)。この丸めは、文字間隔を小数画素として直接指定する場合だけでなく、百分率またはem値として指定し、ピクセル単位の最終計算結果を小数画素にする場合にも発生します。非常にイライラ。

5

この不具合はfixed in Chromiumであり、Chrome 30に搭載されています。そのため、分数値はFirefox、Chrome、Operaでサポートされるようになりました。

+0

これは修正されると言われていますが、私はまだ最新の '31.0.1650.48 m。 –

+0

Chromeのバージョン31.0.1650.48で上記の例(http://jsfiddle.net/fZYqL/2/)がテストされ、うまく動作しました。 – Max

+0

テスト済みで、IE9 + – Wolverine

関連する問題