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

【问题标题】：css - letter-spacing under webkit - any workaround?css - webkit 下的字母间距 - 任何解决方法？
【发布时间】：2012-07-10 10:43:33
【问题描述】：

我正在努力解决像 safari 这样的 webkit 浏览器不支持小于 1 像素的字母间距的事实。有什么解决办法吗？我正在考虑转换我的字体并将字母间距直接添加到该新字体中：如果有支持它的转换器，这会起作用吗？谢谢

【问题讨论】：

【解决方案1】：

你总是可以使用em's。

letter-spacing: 0.5em;

【讨论】：

【解决方案2】：

我在 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 + 放大，您会看到第二个文本明显变宽，因为字母间距稍大。

实施质量可能存在争议，但支持是存在的。

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

【讨论】：

【解决方案3】：

他们当然知道。试试0、-1px等。

输出：

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 }

【讨论】：