字體完全加載後jquery動畫效果

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" 
        }, {..... 

由於使用的字體，根據需要，只要我改變網頁字體像「宋體」左右......那麼動畫沒有表現動畫行爲順利，不需要加載時間...

是否有任何選項可以解決此問題，因爲客戶端想要使用具有相同動畫效果的自定義字體。

任何幫助，將不勝感激。

問候。

Answer 1

字體在您的服務器上正確嗎？你在使用CSS @ font-face來定義元素的文本屬性嗎？ http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp （我知道這不是最好的資源，但在這裏很容易定義。）

如果你的樣式標籤在你的腳本標籤之前，我相信應該沒有問題。但也許是因爲字體文件是如此之大，你應該給它時間來加載：

 window.setTimeout(customAnimation,100); 

谷歌Chrome瀏覽器的檢查元素 - >網絡應該給你的文件需要多久才能完全做到這一點是一個好主意。

我也發現這個：http://paulirish.com/2009/fighting-the-font-face-fout/它指的是一個不同的問題，但應該有相同的結果。

注意.ttf只能在某些瀏覽器中使用。例如。早期的IE使用.eto。另外，由於字體非常不穩定，如果只需要幾個字符的字體，最好只使用圖像。