Fonts Safari，带有自定义字体的字母间距

正在使用来自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多个像素的宽度

我不明白

有人知道如何解决这个问题吗

---

谢谢。

我相信safari是四舍五入到整像素的，不管您使用的是什么单位

因此，0.0618em和0.0619em之间的差值是从0px到1px的点

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

---

不幸的是，我没有一个解决方案，但希望这有助于解释你所看到的

这个问题没有合适的解决方案。Safari/Webkit将错误地呈现这些内容

---

另一个涉及类似问题的线程

这似乎只是由svg字体引起的！

---

将svg放在最后，对字体进行重新排序，应该可以解决问题。但是svg字体不会被使用，使用ems渲染可能会变脏（呃）

，间距要好得多。我在chrome vs.safari中看到了这一点……在换成em后，它们趋于平衡：是的，它“更好”，但这时你需要真正的字母间距（如你的例子中）。我担心没有真正的解决办法。它只是令人不安，因为差异如此严重。“真正的字母间距”？相对于虚假的字母间距？如果您在ems（字体大小）中定义了您的值，那么您应该得到所需的解决方案。如上所述，Safari无法正确呈现这些内容，无论我使用哪种方法（px或em）。“real”是指实际的、正确计算的字母间距。我开始怀疑是否有合适的解决方案来解决这个问题。这是事实，但将.svg向上移动可以很好地修复Windows中的Chrome渲染，但它会弄乱Safari（也在Windows上）中的字母间距。如果.svg在那里（在.WOFF之前），那么在px或em中设置字母间距并不重要（我将其设置为-1px），无论哪种方式，它都无法正确渲染。到目前为止，我找到的唯一解决方案是逐个浏览器定位，并具有自定义的@font-face声明。