UIWebView竖屏时字体比横屏细

Question

我的应用包含一个UIWebView。当应用从纵向旋转到横向或者反过来时，字体的粗细似乎会稍微改变。无论是加粗文本还是普通文本，在横向模式下都会略微加粗，在纵向模式下则会略微变细。在Safari中没有出现这种情况，只有在我的应用中才有。以下是一个示例图像，是在iPad上截屏后旋转和裁剪的一个示例部分。 alt text http://dl.swankdb.com/font-change-example.png 我已经配置了以下CSS，但它似乎只能防止字体大小的剧烈变化，而不能防止我观察到的细微重量变化：

html {
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}

有人能解释一下吗？模拟器没有出现这个问题，但我的iPad、iPhone 3GS和iPhone 4都有。我还收到了客户的反馈，他们也遇到了这个问题，所以我知道这不是我的错觉！

- Alex

---

你自己的代码片段解决了我的字体问题！ - Erik S

Answer 1

我在使用Safari浏览器打开正在制作的网页应用时，也遇到了这个问题。经过一天的思考和解构iPad用户指南所使用的CSS后，我发现

 -webkit-transform: translate3d(0,0,0);

这就解决了问题。通过搜索发现，这启用了渲染的硬件加速，从而在纵向和横向方向上产生了更一致的结果。

- helloPiers

---

非常感谢，这极大地改善了图片/图标字体的渲染。 - Michael Lumbroso

Answer 2

在花费了很长时间来尝试解决这个问题后，我找到了一个解决方案：

使用以下代码：

html {

-webkit-font-smoothing: none;

}

- Masm

Answer 3

这是因为只有一种模式可以利用显示器中的亚像素，因为它们按照特定方向排列。另一种模式将以灰度反锯齿方式显示字体，看起来略有不同。

- Frode Bo Helland