使用CSS转换缩放DOWN webfont时的文本别名

时间:2016-01-12 10:34:34

标签: css text scale css-transforms aliasing

按照最佳做法,我正在使用requestAnimationFrame和CSS转换来平滑地缩放HTML5 / ES6(编译为JavaScript)应用程序中的元素。

当我将其应用于文本时,我最初将font-size属性设置得更大,并使用scale上的CSS转换从那里缩小。

问题是,当文本缩放到小于0.5时,这会导致不可用的别名级别。我正在使用Chrome的最新稳定版本,但在Safari上也是如此。

Screenshot showing aliasing of font when scaled small

我在父元素上设置了以下属性:

-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform:translate3d(0,0,0);

但这没有效果。我还在元素本身设置了-webkit-backface-visibility属性,并尝试了outline: 1px solid transparent;技巧 - 没有快乐。

有没有人经历过这个?有没有办法在使用CSS转换缩放文本时启动抗锯齿?

0 个答案:

没有答案