Safari (5.0.5) 中的文本呈现不一致
我很难解决这个问题。
我正在处理 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，但没有成功）
I'm having a hard time resolving this.
I'm working on http://movingwineforward.com, but it renders text inconsistently, as you can see in this screenshot:
When the page loads, the text in the main menu looks thin (left), and is consistent with every other OS and Browser. But when clicked, it becomes a bit heavier as in the right side of the screenshot.
I checked every CSS property, both in the stylesheet and in Safaris (and Chrome) DOM Inspector, and they both are identical.
When I disable scripts in Safari, the text loads like heavier version (right), so I guess that is interfering. (I'm loading some Vimeo flash players, among other scripts).
For added mistery, this site is a copy of http://daf.cl, and they both have the exact same stylesheet, DOM (markup), font files, and Javascript. Only colors and content change. But in http://daf.cl the text loads initially in the heavier version and stays like that.
I've been able to reproduce this behaviour on Safari 505 running in OSX Leopard.
By clients request, the text has to look like the one on the right (heavier).
I've tried forcing -webkit-font-smoothing and text-rendering in CSS, but none did the trick. Font weight does not look good, as it forces the typeface.
Update 1:
I know now when this ocurrs: only when there is a Vimeo flash player behind the menu, the text renders thinner. If there is no video behind, it looks heavier (as it should). Perhaps this brings new light. (I tried disabling jQuery Froogaloop for Moogaloop, but didn't work)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
首先，执行以下操作：
将其应用于包含文本的对象将初始化它，使其看起来“更轻”。因此，它不会以您喜欢的方式解决问题（坚持“常规”厚度），而是会防止随后“反弹”到外观较浅的变体。
现在，让我们做一些调整：
另外，应用与字体颜色完全相同的微妙文本阴影将使文本看起来几乎完全像您想要的那样。
First, do this:
Applying this to the object containing your text will initialize it looking 'lighter'. So it wont't fix the issue in your preferred way (stick to 'regular' thickness), but will instead prevent the subsequent 'bounce' to the lighter looking variant.
Now, let's do some tweaking:
Additionally applying a subtle text-shadow in the exact same color as the font will result in the text looking almost exactly like you want.
添加类似
text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);的内容。虽然这不是真正的解决方案，但您可以尝试在文本中
Though not a real solution, you could try adding something like
text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);to the text.