防止在具有暗示(网格拟合)文本的元素上进行“跳跃”CSS转换

前端之家收集整理的这篇文章主要介绍了防止在具有暗示(网格拟合)文本的元素上进行“跳跃”CSS转换前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试在我正在处理的网站的某些标题上应用一些CSS3转换,但是有一些关于元素上的转换,包含真正错误的文本:在使用提示或者网格匹配字体的字形的浏览器中我猜想是大部分的,也许是Safari),在转换的开始和结束处,有一个值得注意的“跳跃”,你可以看到文本被回到像素网格,如jsfiddle所示: http://jsfiddle.net/8csA9/20/(part这可能是由于过滤造成的瞬间“模糊”,但是在这里,至少在FF和Chrome中肯定会有一些形状修改)

通常我甚至不会考虑弄乱字体渲染的复杂性,但是考虑到字形很大,我觉得在这种情况下并不重要,并且想知道是否有一种方法来禁用提示,或者使这些转换的一些其他方式更平滑一些。有人知道这是否可以完成,怎么办?

PS:这个问题实际上扩展了一点,只是过渡,只是应用一个静态旋转也使至少Firefox继续提示文本,结果最终看起来相当..奇怪

PPS:似乎存在(或已经存在)’-webkit-font-smoothing’属性,但是CSS3-fonts草稿似乎已经删除了基于(font-smooth)的规则,并且它似乎只是曾经在Chrome上使用过Mac

解决方法

使用背面可见性:隐藏;
**更新:webkit moz mz和标准
http://jsfiddle.net/jugularkill/58S2z/4/

更多背景知名度:
http://www.w3schools.com/cssref/css3_pr_backface-visibility.asp

猜你在找的CSS相关文章