Safari瀏覽器，字母間距與自定義字體

@import url(http://fonts.googleapis.com/css?family=Dosis:400,300,200,500,600,700,800);

在Firefox和Safari經過廣泛的測試，而被非常清楚，我永遠不會讓這兩個瀏覽器查看所有完美的像素精確罰款在我的Photoshop原設計的看法，我絆了最令人不安的問題：

字母間距

無論我嘗試，我不能讓信 - 正確的進入webkit瀏覽器。

一個簡單的例子：

.text-basic { 
    font-weight:  200; 
    font-size:   16px; 
    letter-spacing:  0.52px; 
    line-height:  22px; 
}

這使得完全正常的方式，我希望它，在Firefox（即使我亂砍FF更好地爲15.5px字體大小，它是沒問題[除非有人有異議]）。

但是，在Safari中，letter-spacing不起作用。

經過一番研究，我發現，它不會允許低於1px的字母間距，但它說，它這樣做，如果我使用EM措施。就這樣吧。

如果我使用最多：

letter-spacing: 0.0618em

什麼也沒有發生。不用找了。字母間距太低。

但是如果我使用：

letter-spacing: 0.0619em

它突然卡和字母間距是太高了。像10個字的文本塊突然佔用超過50個額外的像素寬度。

我不明白。

有誰知道如何解決這個問題？

謝謝。

2012-04-16 SquareCat

這個問題沒有適當的解決方案。 Safari/Webkit將錯誤地渲染這些東西。

另一個線程涉及類似問題can be found here

2012-05-13 12:56:08 SquareCat

我相信Safari無論你使用的是什麼單位，都會圍繞整個像素。

因此，0.0618em和0.0619em之間的差異是從0px到1px四捨五入的點。

如果您發現safari中的字母空間使用0.0619em和1px;

不幸的是，我沒有解決方案，但希望能幫助解釋你所看到的。

2012-04-26 19:54:22 kgiff

使用ems，間距要好得多。我在鉻和Safari瀏覽器中看到了這一點......在更換爲em之後，它們變得平坦了：http://jsfiddle.net/EdbNt/1/ – albert 2012-04-27 04:20:13

是的，它的'更好'，但是這是當你爲字母之間的實際間距（就像你的例子）。我擔心這沒有真正的解決辦法。它只是令人不安，因爲差異非常嚴重。 – SquareCat 2012-04-27 12:01:06

「真實字母間距」？而不是錯誤的字母間距？如果你用ems，font-size定義你的值，你應該得到你想要的解決方案 – albert 2012-04-28 09:31:11

這似乎只能通過SVG字體造成的！重新排列你的字體網址最後放svg，它應該解決這個問題。但svg字體不會被使用和渲染可能是骯髒的（呃）

2012-10-01 14:38:31

這實際上是真的，但移動.svg可以很好地修復Chrome在Windows中的渲染，但它也會在Safari（也是在Windows）上混淆字母間距 – mare 2012-11-22 23:19:36

，如果.SVG在那裏（在.WOFF之前）如果你在px或em中設置字母間距（我將它設置爲-1px），無論哪種方式都無法正確渲染，無所謂。我目前發現的唯一解決方案是通過瀏覽器定位瀏覽器並自定義@ font-face聲明。 – mare 2012-11-22 23:35:01

回答