html - 防止 'jumpy' 带有提示(适合网格)文本的元素上的 CSS 转换

标签 html css

我正尝试在我正在处理的网站中的某些标题上应用一些 CSS3 过渡,但是在包含文本的元素上的过渡确实让我感到烦恼:在应用字体提示或网格适合的浏览器中字形(我想是其中的大部分,也许是 Safari 除外),在过渡的开始和结束处有一个明显的“跳跃”,您可以看到文本被捕捉回像素网格,如此 jsfiddle 中所示: http://jsfiddle.net/8csA9/20/ (部分原因可能是由于过滤导致的短暂“模糊”,但这里肯定有一些形状修改,至少在 FF 和 Chrome 中是这样)

通常我什至不会考虑搞乱字体渲染的复杂性,但考虑到字形如此之大,我觉得在这种情况下它并不重要,并且想知道是否有任何一种方法可以禁用暗示,或其他一些使这些过渡更平滑的方法。有谁知道这是否可以完成以及如何完成?

PS:这个问题实际上超出了过渡的范围,仅仅应用静态旋转也至少让 Firefox 继续提示文本,结果看起来很奇怪。

PPS:似乎确实存在(或已经存在)“-webkit-font-smoothing”属性,但 CSS3 字体草案似乎已经放弃了它所基于的规则(字体平滑),并且它似乎它只适用于 Mac 版 Chrome

最佳答案

使用backface-visibility: hidden; **更新:webkit moz mz 和标准 http://jsfiddle.net/jugularkill/58S2z/4/

更多关于背面可见性: http://www.w3schools.com/cssref/css3_pr_backface-visibility.asp

关于html - 防止 'jumpy' 带有提示(适合网格)文本的元素上的 CSS 转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9707202/

相关文章:

javascript - 使用 CSS,如何在不设置显式高度的情况下使两个元素填充 window.innerHeight?

javascript - jQuery 如何在循环中仅追加一次数据

javascript - jQuery 如何为具有相同类名的多个元素激活一个事件

html - DIV 未垂直覆盖整个内容

html在全局中隐藏滚动条,我如何在div标签中显示它

html - 页眉和页脚在 safari 上无法正常工作(SWF + 图片)

html - 从右到左出现的方框阴影

javascript - 如何让图片库将显示图像更改为缩略图?

javascript - 点击时 Fancybox 加载 div?

jQuery: slideDown() 显示错误的 div