【问题标题】：Text renders inconsistently in Safari (5.0.5)Safari (5.0.5) 中的文本呈现不一致
【发布时间】：2011-09-30 17:05:25
【问题描述】：

我很难解决这个问题。

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

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

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

【问题讨论】：

您可以尝试删除所有无关的样式表和 JavaScript 以查看问题是否消失。然后将它们一个一个放回去，直到问题再次出现。
@Blender 你的意思是右边那个，更重的那个？是的，这就是它应该看起来的样子，但我不能强迫它看起来像那样。
您可能无法解决该问题（取决于渲染引擎的合成工作方式）。您是否为 Flash embed 尝试过不同的窗口模式？
我认为我无法访问 Flash 嵌入，因为我使用的是 Vimeos Universal Player。它通过 iframe 工作，因此我无法访问这些实例，因为它们位于另一个域中。

【解决方案1】：

首先，这样做：

opacity: .99;

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

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

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

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

【讨论】：

【解决方案2】：

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

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

到正文。

【讨论】：