为啥在 Chrome 中转换字体大小如此不稳定?

Posted

技术标签:

【中文标题】为啥在 Chrome 中转换字体大小如此不稳定?【英文标题】:Why is transitioning font-size so choppy in Chrome?为什么在 Chrome 中转换字体大小如此不稳定? 【发布时间】:2014-06-25 19:58:07 【问题描述】:

在两种不同字体大小之间应用 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 中的动画流畅?

【问题讨论】:

我认为这不是浏览器的问题。首先,每个字符每次都需要增加一点,许多字符的像素差异的集合是肉眼可见的。其次,每行的断行会迫使单词换行,会感觉起伏不定。 @Daniel Cheung:那么为什么 Firefox 能够比 Chrome 做得更好? @Šime Vidas,好吧,它给我带来了不同(ubuntu 上一个相当老的 chrome [18.0.xx])但足够公平。删除了这个无用的答案。 【参考方案1】:

Chrome 目前不使用 DirectWrite 在 Windows 上进行字体渲染。文本没有抗锯齿,因此字体大小被四舍五入(到最接近的整数?)。

不过,他们正在努力。请参阅相关错误票证上的this comment,尤其是附件:

如果您使用正确的标志启用 DirectWrite,它应该可以流畅地动画。

【讨论】:

有点离题,但这只是我见过的最好的pangram,因为你可以想象现实生活中有人会说它(尽管谁把酒放在壶里?)。 我已经在 Canary 中签入并设置了 DirectWrite 标志。光滑如黄油。顺便说一句,我听说这个功能将在 37 版中默认启用。 显然,谷歌的那个有头脑的男孩还没有破解过这个。 chrome 的工作人员开始落后了....

以上是关于为啥在 Chrome 中转换字体大小如此不稳定?的主要内容,如果未能解决你的问题,请参考以下文章

为啥字体大小(和其他元素)在移动设备上显得如此之小

为啥微软雅黑字体打印出来大小不一?电脑显示正常,字号为小四,求解~

为啥将PDF转化为word后字体和格式发生变化

为啥WORD转换PDF时字体会丢失?

为啥我家的谷歌浏览器上的字模糊不清?字不小,但是模糊。

为啥将PDF转化为word后字体和格式发生变化