web-dev-qa-db-ja.com

CSSを文字間隔にする方法はありますか:0.5 px?

私は問題に遭遇しました、ユーザーがテキストを読みやすくする必要があるため、1ピクセルの文字間隔を使用しましたが、見苦しいので、0.5ピクセルなので0.5ピクセルを使用すると思いましたが、動作しません。em属性を使用してみましたが、タスクを実行できませんでした。

だから、文字間隔を半分のピクセルにする方法があります(可能であればクロスブラウザソリューション)

31
Ilja

このバグは2008年に報告され、確認されています。したがって、誰かがWebkitにハッキングしたい場合は、多くのデザイナーを満足させるでしょう。

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

17
idFlood

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

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

Firefox versus Webkit

6
Phrogz

このバグは Chromiumで修正 され、Chrome 30に上陸しました。したがって、Firefoxで小数値がサポートされるようになりましたChromeおよびOpera 。

5

@Zach Re:小数ピクセル。それらは物理的には存在しませんが、透明度と色の変化によってデジタル的にシミュレートされます。良い例は、アイコンとタイプのセリフです。非常に細い線のように見えるものをよく見ると、目をだますような明るい色で線をレンダリングすることによってシミュレートされていることがすぐにわかります。そのため、存在しない場合でも、グラフィックソフトウェアは小数ピクセルを適切に処理してきました。 Webkitブラウザーがまだ提供していないのは残念です。

Re:小数の文字間隔。これは、Webkit以外のブラウザでも指定でき、正常に機能します(IEの場合はKudos)。Webkitブラウザでは、文字間隔は最も近い整数に丸められます(切り捨てられると思います)。この丸めは、文字間隔が小数ピクセルとして直接指定されている場合だけでなく、パーセンテージまたはem値として指定されており、ピクセルでの最終計算が小数ピクセルになる場合にも発生します。

2
cockypup

サブピクセルサイズは合法ですが、ブラウザ間で予測できない結果になる可能性があります。テキストのようなものもピクセル全体に整列しようとします(Phrogzが言うように)。その結果、丸め誤差が発生して、物が不均一に見える可能性があります。

1
Toomai

小数の文字間隔値は、2013年末以降、Webkit、Firefox、ChromeおよびOpera)でサポートされています。

CSSトリックで確認- https://css-tricks.com/almanac/properties/l/letter-spacing/

そして、私はそれをテストしました。

1
Joshua Dance