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

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

在 Firefox 和 Safari 中进行了大量测试后,虽然我非常清楚我永远不会让两个浏览器都像我的 photoshop 中的原始设计 View 一样完美地查看像素,但我偶然发现了最令人不安的问题:

字母间距

无论我尝试什么,我都无法在 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;

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

关于fonts - Safari,自定义字体的字母间距,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10177742/

10-09 14:28
查看更多