2012-07-10 49 views
3

我很苦惱,像safari這樣的webkit瀏覽器不支持小於1像素的字母間距。有沒有解決方案呢? 我正在考慮轉換我的字體,並直接將字母添加到新的字體: 這個工作和任何想法,如果有一個轉換器支持? 謝謝css - webkit下的字母間距 - 任何解決方法?

回答

1

您可以隨時使用em's。

letter-spacing: 0.5em;

+0

不起作用 - webkit會將值<1 ..例如0.06em與0em的結果相同 - 0.07em與0.1em的結果相同 - 非常煩人:/ – Fuxi 2012-07-10 10:54:55

0

當然可以。嘗試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 } 
0

我測試的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放大+你會看到第二個文本變得明顯更寬,因略大的字母間距。

實施質量可能會引起爭議,但支持是存在的。另一方面,如果您不喜歡字體的自然外觀,並且間距會引起設計師的決定,請使用不同的字體。機械地增加文本中的所有字母間距表示字體設計中的不信任,並且是粗略的工具。儘管如此,在短文本的特殊場合中可能需要字母間距 - 但小於一個像素則幾乎沒有用處。