Question

使用Google Webfonts中的Dosis字体...

@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中，字母间距不起作用。

经过一些研究后我发现它不允许字母间距低于1px，但据说如果我使用 em 措施它会这样做。就这样吧。

如果我用完了：

letter-spacing: 0.0618em

什么都没发生。没变。字母间距太低了。

但如果我使用：

letter-spacing: 0.0619em

突然间它突然间，字母间距太高了。就像10个单词的文本块一样，突然占据了超过50个额外像素的宽度。

我不明白。

有谁知道如何解决这个问题？

谢谢。

Answer 1

我相信，无论你使用的是什么单位，safari都会四舍五入到整个像素。

因此0.0618em和0.0619em之间的差异是它从0px到1px的转折点。

如果您注意到使用0.0619em和1px的中的字母空间相同;

不幸的是，我没有解决方案，但希望这有助于解释您所看到的内容。

Answer 2

此问题没有正确的解决方案。 Safari / Webkit将错误地呈现这些内容。

涵盖类似问题的另一个主题can be found here

Answer 3

这似乎只是由svg字体引起的！重新排序你的字体面部网址最后svg，它应该解决问题。但是svg字体不会被使用，渲染可能很脏（呃）