在两种不同字体大小之间应用 CSS 过渡时,生成的动画在 Firefox 中很流畅,但在 Chrome 中却相当不稳定。
div {
font-size: 87.5%;
padding: .5em;
margin: .5em;
transition: font-size .25s ease-in-out .25s,
padding .25s ease-in-out .25s,
margin .25s ease-in-out .25s;
}
div:hover {
font-size: 100%;
}
现场演示: http://jsfiddle.net/B7Zyp/2/ (将鼠标悬停在带有蓝色边框的框上)
这是为什么呢?有没有办法让 Chrome 中的动画流畅?
最佳答案
Chrome 当前不使用 DirectWrite 在 Windows 上进行字体渲染。文本未消除锯齿,因此字体大小四舍五入(到最接近的整数?)。
不过他们正在努力。参见 this comment在相关的故障单上,尤其是附件:
如果您使用正确的标志启用 DirectWrite,它应该可以流畅地进行动画处理。
关于html - 为什么在 Chrome 中转换字体大小如此不稳定?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23541545/