为什么Chrome浏览器中的字体大小过度变化？

在两种不同字体大小之间应用CSS转换时，在Firefox中生成的动画非常流畅，但在Chrome中非常不稳定。为什么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在动画中更流畅？

来源

2014-05-08 Šime Vidas

我认为这不是浏览器的问题。首先，每个角色每次需要增加一点点，对于许多角色来说，像素差异的集合对于眼睛是可见的。其次，每条线的突破迫使文字切换线，并且会感觉起伏不定。 –

@Daniel Cheung：那么为什么Firefox能够比Chrome更好呢？ – BoltClock

@ŠimeVidas，好吧，它给了我不同的看法（Ubuntu上的一个相当古老的Chrome [18.0.xx]），但足够公平。删除了这个不可用的答案。 – davidkonrad

Chrome当前不在Windows上使用DirectWrite进行字体渲染。文本不是反锯齿的，因为这些字体大小是四舍五入的（到最近的整数？）。

虽然他们正在努力。见this comment对相关的bug票，尤其是附件：

Smooth font scaling

如果启用与适当的标志DirectWrite的，它应该顺利动画。

来源

2014-05-08 12:31:10

有点偏离主题，但这只是我见过的最棒的单身汉，因为你实际上可以想象有人在现实生活中说过这些话（尽管谁把酒放在一个壶里？）。 – BoltClock

该死的，好东西。我不知道。 – zgood

我在加纳利用DirectWrite标志设置了签入。像黄油一样光滑。顺便说一句，我听说有传言说这个功能默认启用在版本37中。 –

为什么Chrome浏览器中的字体大小过度变化？

回答

相关问题