css - css - webkit の下の文字間隔 - 回避策はありますか?

Question

サファリのような Webkit ブラウザが 1 ピクセルより小さい文字間隔をサポートしないという事実に苦労しています。まだ解決策はありますか？私は自分のフォントを変換し、文字間隔をその新しいフォントに直接追加することを考えていました.これは機能しますか?それをサポートするコンバーターがあれば、何かアイデアはありますか? ありがとう

Answer 1

いつでもem'sを使用できます。

letter-spacing: 0.5em;

Answer 2

確かにそうです。0、-1pxなどを試してください。

デモ： http： //jsbin.com/ovepan/edit#html、live

出力：

HTML：

<p id="one">Letter spacing 1px</p>
<p id="zero">Letter spacing 0px</p>
<p id="negative-one">Letter spacing -1px</p>

CSS：

#one {letter-spacing: 1px }
#zero {letter-spacing: 0px }
#negative-one {letter-spacing: -1px }

Answer 3

Safari と Chrome (Win 7) で次のことをテストしました。

<style>
.foo { letter-spacing: 0.7px; }
</style>
Hello world! This is sample text.
<div class=foo>Hello world! This is sample text.</div>

最初は違いはほとんどわかりませんが、Ctrl + でズームすると、文字間隔がわずかに大きくなるため、2 番目のテキストが目に見えて広くなることがわかります。

実装の質については議論の余地があるかもしれませんが、サポートはあります。

一方、フォントの自然な外観が気に入らない場合は、設計者の判断により間隔が空く場合は、別のフォントを使用してください。テキスト内のすべての文字間隔を機械的に大きくすることは、フォントのデザインに対する不信感を表しており、粗雑なツールです。ただし、短いテキストの特別な場合には文字間隔が必要になる場合がありますが、1 ピクセル未満ではほとんど役に立ちません。