Safari，自定义字体的字母间距答案

【问题标题】：Safari, letter-spacing with custom fontSafari，自定义字体的字母间距
【发布时间】：2012-04-16 16:10:38
【问题描述】：

使用来自 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 多个额外的像素宽度。

我不明白。

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

谢谢。

【问题讨论】：

【解决方案1】：

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

所以 0.0618em 和 0.0619em 之间的区别在于它从 0px 舍入到 1px 的点。

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

很遗憾，我没有解决方案，但希望这有助于解释您所看到的情况。

【讨论】：

使用ems，间距要好很多。我在 chrome vs. safari 中查看了这个....在更改为 em 后，他们平衡了：jsfiddle.net/EdbNt/1
是的，它“更好”，但那是你在字母之间寻找真正间距的时候（就像你的例子一样）。我担心没有真正的解决方案。它只是令人不安，因为差异如此严重。
“真正的字母间距”？而不是假字母间距？如果你在 ems 中定义你的值，字体大小，你应该得到你想要的解决方案
如上所述，无论我使用哪种方法（px 或 em），Safari 都无法正确呈现这些内容。 “真实”是指实际的、正确计算的字母间距。我开始怀疑这个问题是否有适当的解决方案。

【解决方案2】：

这个问题没有合适的解决方案。 Safari / Webkit 会错误地渲染这些东西。

另一个讨论类似问题的帖子can be found here

【讨论】：

【解决方案3】：

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

【讨论】：

这实际上是正确的，但是将 .svg 向上移动可以很好地修复 Chrome 在 Windows 中的呈现，但它会弄乱 Safari 中的字母间距（也在 Windows 上）
另外，如果 .SVG 在上面（在 .WOFF 之前），无论您将字母间距设置为 px 还是 em（我将其设置为 -1px）都没有关系，无论哪种方式都不会无法正确渲染。到目前为止，我发现的唯一解决方案是通过浏览器定位浏览器并具有自定义 @font-face 声明。