css - webkit下的字母间距 - 任何解决方法？

Question

我正在努力解决像safari这样的webkit浏览器不支持小于1像素的字母间距这一事实。还有什么解决方案吗？ 我正在考虑转换我的字体并将letterspacing直接添加到该新字体： 如果有一个转换器支持它，这会工作和任何想法吗？ 感谢

Answer 1

您可以随时使用em。

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 +缩放，你会看到第二个文字明显变宽，因为字母间距略大。

实施的质量可能会受到争议，但有支持。

另一方面，如果您不喜欢字体的自然外观，由于间距是设计师的决定，请使用不同的字体。机械地增加文本中的所有字母间距表示对字体设计的不信任，并且是粗略的工具。但是在短文本的特殊场合可能需要字母间距，但是不到一个像素几乎没用。