Safari中的文本呈现不一致(5.0.5)

时间:2011-09-30 17:05:25

标签: javascript css text safari rendering

我很难解决这个问题。

我正在使用http://movingwineforward.com,但它会使文字呈现不一致,如您在此屏幕截图中所示:

error http://f.cl.ly/items/1t2u0p0B1d2a3a0S452B/laksdf.png

当页面加载时,主菜单中的文本看起来很薄(左),并且与其他所有操作系统和浏览器一致。但是当点击时,它会变得有点重,就像在屏幕截图的右侧一样。

我检查了样式表和Safaris(和Chrome)DOM Inspector中的每个CSS属性,它们都是相同的。

当我在Safari中禁用脚本时,文本会加载更重的版本(右),所以我猜这是干扰。 (我正在加载一些Vimeo flash播放器,以及其他脚本)。

对于添加的错误,此站点是http://daf.cl的副本,它们都具有完全相同的样式表,DOM(标记),字体文件和Javascript。只有颜色和内容会发生变化但是在http://daf.cl中,文本最初加载的版本较重,并保持不变。

我已经能够在 OSX Leopard 中运行的 Safari 505 上重现此行为。

根据客户要求,文本必须看起来像右边的那个(更重)。 我已经尝试在CSS中强制执行 -webkit-font-smoothing text-rendering ,但没有人能够做到这一点。字体粗细看起来并不好,因为它强制使用字体。

更新1:

我现在知道这个问题:只有当菜单后面有一个Vimeo flash播放器时,文字才会变薄。如果后面没有视频,它看起来更重(应该如此)。也许这会带来新的亮点。 (我尝试禁用jog Froogaloop for Moogaloop,但没有用)

2 个答案:

答案 0 :(得分:2)

首先,这样做:

opacity: .99;

将此应用于包含文本的对象会将其初始化为“更轻”。因此,它不会以您喜欢的方式解决问题(坚持'常规'厚度),而是防止随后的“反弹”到更轻松的变体。

现在,让我们做一些调整:

text-shadow: 0 0 1px rgba(255, 255, 255, 0.75);

另外,使用与字体颜色完全相同的细微文本阴影将使文本看起来几乎完全符合您的要求。

答案 1 :(得分:0)

虽然不是真正的解决方案,但您可以尝试添加类似

的内容

text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);

到文本。