0

この質問はばかげているように思えるかもしれませんが、クライアントが提供したフォントと同じアニメーションに問題があります。

フォントは、すべての形式を含む合計 1.55 MB です。

問題は、jquery animate と complete: 関数を使用して、すべての要素がページ内で次々にアニメーション化されるようにすることです。

テキストは、クライアントから送信されたカスタム フォントを使用します。

コードは次のようになります。

.... 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」などの Web フォントに変更するとすぐに...その後、アニメーションは読み込み時間をかけずにスムーズに動作します...

クライアントが同じアニメーション効果でカスタム フォントを使用したいので、この問題を解決するオプションはありますか?

どんな助けでも大歓迎です。

よろしく。

4

1 に答える 1

0

フォントはサーバー上にありますか? 要素のテキスト プロパティを定義するために CSS @font-face を使用していますか? http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp (最適なリソースではないことはわかっていますが、ここで簡単に定義できます。)

style タグが script タグの前にある場合、問題はないと思います。しかし、おそらくフォント ファイルが非常に大きいため、ロードする時間を与える必要があります。

     window.setTimeout(customAnimation,100);

Google Chrome の [Inspect Element] -> [Network] を使用すると、ファイルがこれを完全に実行するのにどれくらいの時間がかかるかがわかります。

これも見つけました: http://paulirish.com/2009/fighting-the-font-face-fout/別の問題を指していますが、同じ結果になるはずです。

Mind .ttf は特定のブラウザでのみ動作します。例えば。以前の IE は .eto を使用します。また、フォントは揮発性が高いため、数文字だけのフォントが必要な場合は、画像のみを使用するのが最適です。

于 2012-09-22T05:49:51.857 に答える