4

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

我不明白。

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

谢谢你。

4

3 回答 3

2

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

所以 0.0618em 和 0.0619em 之间的差异是它从 0px 舍入到 1px 的点。

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

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

于 2012-04-26T19:54:22.207 回答
1

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

可以在此处找到另一个涵盖类似问题的线程

于 2012-05-13T12:56:08.093 回答
1

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

于 2012-10-01T14:38:31.900 回答