Question

这个问题对某些人来说可能看起来很愚蠢，但我对客户提供的字体以及相同的动画有疑问。

字体总数为1.55mb，包括所有格式。

现在的问题是，我正在使用jquery animate并完成：function，以便所有元素在页面中一个接一个地动画显示。

文本使用客户端发送的自定义字体。

代码是这样的：

.... complete: function () {
            $s('#right-inner-content').animate({        right: "0px",
                top: "22px"
            }, {
                duration: 1000,
                specialEasing: {
                    left: ''
                },
                complete: function () {
                    $s('#circle1').animate({
                        bottom: "170px",
                        left: "0"
                    }, {.....

由于使用了字体，一旦我更改为'arial'之类的网络字体，动画就不会按需要运行......然后动画表现平稳而不需要加载时间......

是否有任何选项可以解决此问题，因为客户希望使用具有相同动画效果的自定义字体。

任何帮助都将不胜感激。

问候。

Answer 1

服务器上的字体是否正确？您是否使用CSS @ font-face来定义元素的文本属性？ http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp （我知道这不是最好的资源，但这里很容易定义。）

如果您的样式标记位于脚本标记之前，我相信应该没有问题。但也许是因为字体文件太大了，你应该给它时间加载：

     window.setTimeout(customAnimation,100);

Google Chrome的Inspect Element - ＆gt;网络应该让您很好地了解文件完成此操作所需的时间。

我也发现了这一点：http://paulirish.com/2009/fighting-the-font-face-fout/它指的是一个不同的问题，但应该有相同的结果。

Mind .ttf仅适用于某些浏览器。例如。早先IE使用.eto。此外，由于字体非常易变，如果您只需要几个字符的字体，最好只使用图像。

字体完全加载后jquery动画

1 个答案: