Raphael JS 中的动画字体大小是否有流畅的过渡可能性？

到目前为止似乎它不流畅，但波涛汹涌。例如。如果您有一个 font-size: 14 的状态属性，并且想要以动画方式显示 font-size: 16 的状态，则过渡看起来并不平滑。

它分两步跳跃。首先更改为 15，然后更改为 16px。

可以强迫它看起来更光滑吗？

我在用火狐14供测试用。

我当前的代码：

    var fillerText = {
        "fill" : "#00738f",
        "font-size": 14,
        "font-family": "Arial, Helvetica, sans-serif"
        }
    var fillerTextHover = {
        "fill" : "#00738f",
        "font-size": 16,
        "font-family": "Arial, Helvetica, sans-serif",
        "cursor": "pointer"
        }

text.hover(function () {
       text.animate(fillerTextHover, 500);
               },
  function () {
       text.animate(fillerText, 500);
          }
);

这是一个已知的问题，与拉斐尔无关，但与子像素渲染 http://ie.microsoft.com/testdrive/Performance/TextSizeAnimated/Default.html:

在不支持 GPU 驱动的子像素定位的浏览器中查看时，文本会出现跳跃，因为文本需要使用 CPU 创建，并且每个字母的位置都会四舍五入到最接近的整个像素。

尽管新的可能CSS 3 动画 http://www.the-art-of-web.com/css/css-animation/#animation您可以看到它只是放大字体，直到动画完成然后重新绘制。

很抱歉，我没有为您提供解决方案，但到目前为止我还没有看到带有 CSS 的平滑的跨浏览器字体大小动画。

但是你可以做一点来掩盖这种效果，就是减少动画间隔时间并扩大字体大小的差距。然后，这些步骤会以更快的时间范围出现，并且人们无法看到单个步骤。

看看这个小提琴 http://jsfiddle.net/JVYhy/