CSSの文字間隔を調整する方法はありますか:0.5ピクセル?
-
26-10-2019 - |
質問
問題に遭遇しました。ユーザーがテキストを読みやすくする必要があるため、文字間隔を 1 ピクセルにしましたが、見苦しいので、0.5 ピクセルの半分を使用しようと考えましたが、動作しません。em 属性を使用しようとしましたが、タスクを達成できませんでした。
それで、文字の間隔を半ピクセルにする方法はありますか(可能であればクロスブラウザソリューション)
解決
このバグは2008年に報告され、確認されています。だから誰かがWebkitにハッキングしているように感じているなら、多くのデザイナーを幸せにするでしょう。
他のヒント
サブピクセル文字の間隔は、FFでは正常に機能しますが、WebKitでは機能しません(少なくともWindowsでは)。このテストケースを参照してください:
http://jsfiddle.net/fzyql/2/
また、このテストは、問題であるのはサブピクセルのリテラル値ではないことを示しています。分数を使用します em
レター間隔1px未満の結果もWebkitでは尊重されませんが、Firefoxでも機能します。
このバグはそうです クロムで修正されました そして、Chrome 30に着陸しました。したがって、フラクショナル値はFirefox、Chrome、Operaによってサポートされています。
@Zach Re:分数ピクセル。それらは物理的には存在しませんが、それらは透明度と色の変化によってデジタルでシミュレートされます。良い例は、アイコンとタイプのセリフです。非常に細い線のように見えるものをよく見ると、それが目をだまして明るい色でラインをレンダリングすることによってシミュレートされることをすぐに示します。したがって、それらが存在しない場合でも、グラフィックソフトウェアは長い間フラクショナルピクセルを適切に扱ってきました。 WebKitブラウザがまだそうでないことは残念です。
Re:分数文字間隔。指定して、非ウェブキットブラウザー(IEの称賛)で正常に動作します。 WebKitブラウザでは、文字間隔が最も近い整数に丸められています(丸められていると思います)。この丸めは、文字間隔が分数ピクセルとして直接指定されている場合だけでなく、パーセンテージまたはEM値として指定され、ピクセルの最終計算が分数ピクセルになる場合にも発生します。とてもイライラします。
サブピクセル サイズは合法ですが、ブラウザーによっては予期しない結果が生じる可能性があります。テキストなども (Phrogz 氏が言うように) ピクセル全体に揃えようとするため、結果として生じる丸め誤差によって不均一に見える可能性があります。
分数文字間隔値 WebKitによってサポートされています, 、2013年末以来、Firefox、Chrome、Opera。
CSSのトリックによって確認されました - https://css-tricks.com/almanac/properties/l/letter-pacing/
そして、私はそれをテストしました。