为什么嵌入式谷歌地图会改变 Safari 的字体渲染？答案

【问题标题】：Why is an embedded google map altering Safari's font rendering?为什么嵌入式谷歌地图会改变 Safari 的字体渲染？
【发布时间】：2011-03-31 11:00:28
【问题描述】：

如果您在 Safari 中查看 this page here 的页脚，然后查看任何其他页面上的相同页脚，您会发现字体渲染有所不同。看起来字体平滑对我应用了两次。

如果我关闭 Google 地图，字体渲染就会恢复正常，所以我确信地图是问题的根源。

我正在对所有文本应用透明字体阴影以修复一些@font-face 渲染问题（主要是人工制品），但无论是否存在文本阴影都会出现此问题。

这是 Mac 独有的问题。

还有其他人遇到过这个问题吗？是否有已知原因和/或解决方法？

【问题讨论】：

我也有这个问题，它发生在 safari 但不是 chrome。
所以这对于 Safari 5 之后的版本和 Google Map API 3 之后的版本仍然是一个问题。目前我没有修复，看起来不像那样很多人都注意到了，但我确实知道这个问题与所有类型有关，它不是 Cufon 或 @font-face 问题，它会影响所有类型，包括网络安全。它看起来不像 -webkit 应用样式或文本阴影，因为覆盖这些东西似乎不起作用。曾尝试使用以前版本的 Google API，但没有任何乐趣。所以我没有想法，问题在 Gargantuan 的例子中仍然很明显。会保持 lo
显然这是由谷歌地图使用的 CSS 3D 转换引起的。有关修复，请参阅以下 SO 问题：stackoverflow.com/questions/5190787/…
我想将此问题标记为已回答。你能发表你的评论作为答案吗？

标签： css safari font-face

【解决方案1】：

在过去的几个小时里，我一直在用这个来扯头发。您可以通过添加来修复它

-webkit-font-smoothing: antialiased;

到有问题的选择器。

我希望这可以节省其他人的时间和它给我带来的压力。

【讨论】：

我没有足够的不同版本的 Safari 来按版本缩小范围。

【解决方案2】：

这也是我的问题，谢谢你解决！！！

对我来说略有不同，因为我必须将 -webkit-font-smoothing: subpixel-antialiased; 添加到错误粗细的文本中才能解决问题。

现在就像一个魅力:)

【讨论】：

【解决方案3】：

我在 PC 上的 chrome 和 safari 上对它们进行了测试，它们看起来几乎相同，请记住浏览器渲染并不完全相同，而且您使用的是一些非网络安全字体，例如“Baskerville LT W01 Upright”、“Baskerville”、 “Caslon 540 LT W01 Roman”、“Caslon 540”、“Georgia”、“Times”；

【讨论】：

我认为这是一个只有 mac 的问题，我应该指出这一点。我使用来自 monotype 的 @font-face 作为字体，所以它们是网络安全的。
当我拥有它时，它只是在 Mac 的 Safari 上。让调试变得更加困难。