text-shadow应用于iOS浏览器中的Google Web Fonts

Question

我在iOS上遇到了一个问题，标准的文字阴影效果应用于Google网络字体。字体显示加倍，背后有两层字体颜色的阴影。这在我的非视网膜ipad mini上最明显。我在笔记本电脑浏览器上看不到这种行为。

有关为何发生这种情况的任何建议？

这是一个易于在ios浏览器中输入的演示：http://j.mp/wfontios

现在，我只是使用*选择器使用媒体查询剥离较小屏幕尺寸上的所有文本的文本阴影。也许这个问题有一个更好的补丁。

以下是iPad mini的屏幕截图： photo.jpg http://crosby-generic-staging.s3.amazonaws.com/img/photo.JPG

屏幕截图

Answer 1

搜索没有让我到任何地方，它可能与文本大小相比的百分比偏移（当您将文本从32px缩放到20px时，2px是更大的分数）。您可以尝试使用％代替px，或者只添加以下内容。

在自适应CSS中，添加

@media (max-width: 767px) {
    text-shadow: text-shadow: -1px 1px 1px;
}

这使得较小的文本

更好

修改 我看到你用截图更新了你的问题。此偏移渲染错误可能与described here相同。问题似乎是您正在使用font-weight: bold并且Mobile Safari无法处理它。解决方案似乎是将其设置为正常。

/*reset for mobile browsers */
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}