javascript - 文本在 Safari (5.0.5) 中呈现不一致

Question

我很难解决这个问题。

我正在研究 http://movingwineforward.com , 但它呈现的文本不一致，如您在此屏幕截图中所见:

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

我检查了样式表和 Safaris(和 Chrome)DOM 检查器中的每个 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 播放器时，文本才会变得更细。如果后面没有视频，它看起来更重(应该如此)。也许这会带来新的曙光。 (我尝试为 Moogaloop 禁用 jQuery Froogaloop，但没有成功)

Answer 1

首先，这样做:

opacity: .99;

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

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

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

另外应用与字体颜色完全相同的微妙文本阴影将使文本看起来几乎与您想要的完全一样。