我正尝试在我正在处理的网站中的某些标题上应用一些 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/