2014-03-03 96 views
0

我使用jQuery通過AJAX嵌入我的樣式表以替換當前的font-family並使用其他字體類型進行一些測試。 這是我的代碼:插入樣式後jQuery強制重繪

<script type="text/javascript"> 
$(function(){ 
    var page = $('#page').html(); 
    $.ajax({ 
     url: '/css/style.css', 
     success: function(data){ 
      data = data.replace(/Arial/g, 'Verdana'); 

      $('#styles').html(data); 

     }, 
     async: false 
    }) 
}); 
</script> 
<style type="text/css" id="styles"></style> 

的問題是,在FONT-FAMILY未正確應用。但是,一旦我打開開發工具的風格得到應用。我想對頁面進行完整重繪是必要的。如何在不重新加載頁面的情況下實現這一目標?

由於這僅用於測試,因此我不在乎FOUC或perfomance問題。

編輯

我忽略了typekit進口在我的代碼:

<script type="text/javascript" src="//use.typekit.net/****.js"></script> 
<script type="text/javascript">try{Typekit.load();}catch(e){}</script> 

這似乎是與一個問題。我認爲字體(我包括typekit中的「Europa」)在AJAX請求發出時還沒有準備好。任何建議如何解決?

+0

對不起,嘗試:'document.body.offsetHeight;'在添加新數據 –

+1

或許,試着在更改後觸發窗口調整大小('$(window).resize();') – skip405

+0

@ skip405我想你的意思是調整大小對?! –

回答

0

有計算器上是非常相似的一個問題.. CSS: Auto update font size

或許這對你的作品?它反映了關於強制調整大小事件的評論。

這裏是小提琴從鏈接: http://jsfiddle.net/danield770/rWYjk/

causeRepaintsOn = $("h1, h2, h3, p"); 

$(window).resize(function() { 
    causeRepaintsOn.css("z-index", 1); 
}); 
1

你應該嘗試一次加載腳本調用AJAX。較容易的解決將是:

$(window).on('load', function(){ 
    var page = $('#page').html(); 
    $.ajax({ 
     url: '/css/style.css', 
     success: function(data){ 
      data = data.replace(/Arial/g, 'Verdana'); 

      $('#styles').html(data); 

     }, 
     async: false 
    }) 
}); 

BTW,我看不出有任何理由要設置請求的異步假的,你應該將其刪除。

+0

我發現了這個問題。感謝您的建議,但這不是解決方案。我不得不刪除CSS中的所有'@ font-face'聲明,因爲它們導致了問題。 – enyce12