css - 文本阴影应用于 iOS 浏览器中的 Google Web 字体

Question

我在 iOS 上遇到了应用到 Google Web 字体的标准文本阴影效果的问题。字体在字体颜色的两层后面出现双倍阴影。这在我的非视网膜 ipad mini 上最为明显。我在我的笔记本电脑浏览器上没有看到这样的行为。

关于为什么会发生这种情况的任何建议？

这是一个易于在 ios 浏览器中输入的演示：链接

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

这是 iPad mini 的屏幕截图：

截屏

Answer 1

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

在您的响应式 CSS 中，添加

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

这在较小的文本上呈现得更好

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

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