当前位置：文江博客话题详情

使用position:fixed时iPad上的抗锯齿效果更好，为什么？

发布于 2025-01-01 11:18:51 字数 460 浏览 3 评论 0原文

我注意到，在元素上使用 position:fixed 时，iPad (iOS 5.0.1) 上的文本渲染效果比没有 position:fixed 时更好。对于深色背景上的白色文本尤其如此。

我的问题是如何利用这种改进的抗锯齿功能，而不使用诸如 position:fixed 之类的解决方法。

您可以在下面找到示例图片和相应的代码。

http://jsfiddle.net/t4kTm/

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

阳光下慵懒的猫 2025-01-08 11:18:51

我不知道为什么会这样，但我确实知道如何控制 webkit 浏览器中的抗锯齿：

-webkit-font-smoothing: none; /* Obvious */
-webkit-font-smoothing: subpixel-antialiased; /* This is what quite a few browers already do*/
-webkit-font-smoothing: antialiased; /* Even more than the one above */

这有帮助吗？

I don't know why that is, but I do know how to control anti aliasing in webkit browsers:

-webkit-font-smoothing: none; /* Obvious */
-webkit-font-smoothing: subpixel-antialiased; /* This is what quite a few browers already do*/
-webkit-font-smoothing: antialiased; /* Even more than the one above */

Will this help?

回复收藏 0 原文

巾帼英雄 2025-01-08 11:18:51

更新到 iOS 5 后，我无法再重现这个问题 - 很奇怪。

回复收藏 0 原文

转瞬即逝 2025-01-08 11:18:51

在 iPad 上，将 position:fixed 应用于 body 标记会使所有子元素的字体变细（外观类似于 -webkit-font-smoothing: antialiased）。我还没有进行详尽的测试，但它可以在 iOS 5.1.1 中与 Helvetica Neue 配合使用

body {
  -webkit-font-smoothing: antialiased;  // make fonts thinner in desktop Webkit
  position: fixed;                      // make fonts thinner on the iPad
}

On the iPad, applying position:fixed to the body tag makes the font thinner for all child elements (appearance similar to -webkit-font-smoothing: antialiased). I haven't tested exhaustively, but it works with Helvetica Neue in iOS 5.1.1

body {
  -webkit-font-smoothing: antialiased;  // make fonts thinner in desktop Webkit
  position: fixed;                      // make fonts thinner on the iPad
}

回复收藏 0 原文

~没有更多了~