使用矩阵3d比例和背面可见性时字体像素化

Question

代码：http://jsfiddle.net/quskwLdh/3/

我正在使用Famo.us，并使用matrix3d来转换div。当缩小某些文本并开始变得像素化时，它就会出现问题。

下面的代码有4个测试：

第一个div（style1）：不使用matrix3d，而是使用transform:scale(0.2)。字体很顺利。

第二个div（style2）：使用matrix3d和backface-visibility（默认Famo.us中需要）。它在Chrome中很流畅，但在Safari中也是像素化的。

第三个div（style3）：动态更新matrix3d的css（使用setTimeout）但不使用backface-visibility。再次，它在Chrome中流畅，但在Safari中也是像素化的。

第四个div（style4）：动态更新matrix3d的css（使用setTimeout）并使用backface-visibility。这一切都搞砸了Safari和Chrome，因为它们都是像素化的。

CHROME

SAFARI

HTML

<div class="style1">
    TYPOGRAPHY
</div>

<div class="style2">
    TYPOGRAPHY
</div>

<div class="style3">
    TYPOGRAPHY
</div>

<div class="style4">
    TYPOGRAPHY
</div>

CSS

body {
    font-size:100px;
    font-weight: normal;
    font-family: georgia, serif;
}

.style1 {
    transform:scale(0.2);    
    -webkit-transform:scale(0.2);   
}

.style2 {
    transform:matrix3d(0.2, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -webkit-transform:matrix3d(0.2, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}

.style3 {
}

.style4 {
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}

JS

setTimeout(function() {
    $('.style3').css('transform', 'matrix3d(0.2, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)');    
    $('.style3').css('-webkit-transform', 'matrix3d(0.2, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)');

    $('.style4').css('transform', 'matrix3d(0.2, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)');
    $('.style4').css('-webkit-transform', 'matrix3d(0.2, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)');
}, 1000);

问题：鉴于Famou.us需要matrix3d和backface-visibility:hidden，在Chrome和Safari中使用字体平滑的解决方法是什么（我会不关心IE）？

我已经通过CSS3 scale() causes divs to become pixelated和@font-face for custom fonts, fonts not smooth in Chrome进行了一些研究，因此使用阴影-webkit-text-stroke: 0.3pt;或-webkit-font-smoothing: antialiased;只是不起作用。或者，也许有办法修改/破解Famo.us本身？