情况:
查看 jsFiddle
里面一个div
我有一个图像,后面跟着一个文本,其中有一个font-weight
900 就可以了。在我的本地托管环境中,我使用自定义字体,但对于上面的小提琴,我选择了“非常时尚”的 Comic Sans 来说明我的观点。在发生任何事情之前,我将整个 div 的不透明度设置为 0.7。然而,当鼠标悬停在div
,我希望所有东西的不透明度都达到完全不透明。
Problem:
我注意到,仅在 Webkit 浏览器中(在 Chrome 上比在 Safari 上更明显),将鼠标悬停在div
标签时,文本的粗细将会发生变化。事实上,文本的粗细当然没有任何变化。但是,经过仔细检查,您会发现文本仅在悬停时才以所需的粗细显示,而不是在非悬停状态下。
我做过的事情:
- 我已经在所有最新版本的 Chrome、Firefox 和 Safari 中对此进行了测试。
- 我目前正在新的 MacBook Pro 上进行测试,就我而言,它是视网膜屏幕。然而,我旁边的同事在她的 iMac(非视网膜显示屏)上测试了小提琴,结果发现问题仍然很明显。
- 也许我只是疯了,但我觉得这实际上可能是 webkit 浏览器选择渲染具有不同不透明度的元素的方式。话又说回来,这可能只是我试图避免承认我做错了什么。
我很自然地认为可以用 Comic Sans 来缓解气氛。这是帮助解释问题的屏幕截图:
这不是不透明度本身的问题(事实上,在 @Zoltan 的示例中将其返回到 1 对我来说不会改变任何东西)。
问题在于过渡,webkit 可以使用两种抗锯齿模式:
- 子像素(默认值,但在动画、过渡或变换期间不受支持)或
- 灰度
这意味着,当使用子像素抗锯齿渲染元素并向其应用动画时,webkit 在动画持续时间内暂时切换到灰度,然后在完成后返回到子像素。
鉴于子像素抗锯齿会导致字体稍重,您会得到不需要的伪影。
要解决此问题,请将以下内容添加到您的 css 中:
html {
-webkit-font-smoothing: antialiased;
}
这会强制对所有文本进行灰度抗锯齿,并且您不会看到切换。
(最终结果:http://jsfiddle.net/ErVYs/9/)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)