使用 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/