jQuery的動態添加文本將不會加載網頁的字體樣式

我有一個簡單的網頁：jQuery的動態添加文本將不會加載網頁的字體樣式

<html> 
    <head> 
    <title>...</title> 
    <script ...></script> 
    <link .../> 
    <script> 
     /* HERE */ 
    </script> 
    </head> 
    <body> 
    <div id="cnt"></div> 
    </body> 
</html>

在頭節我加載jQuery的腳本和谷歌的Web字體字體樣式。

我想動態內容添加到我的#cnt，我做了以下（下面的代碼被放在突出位置的代碼之前打印）：

$(document).ready(function(){ 
    var $el1 = $('<div style=\'position:absolute;top:50px;left:425px;font-family:\'Oxygen\',sans-serif;font-weight:300;font-size:35px\'>Hello1</div>'); 
    var $el2 = $('<div style=\'width:350px;height:200px;position:absolute;top:110px;left:425px;font-family:\'Open Sans\',sans-serif;font-weight:400;font-size:19px\'>Hello2.</div>'); 
    var $el3 = $('<div style=\'width:350px;height:200px;position:absolute;top:110px;left:425px;font-family:\'Open Sans\',sans-serif;font-weight:400;font-size:19px\'>Hello3.</div>'); 
    var $el4 = $('<div id=\'imm\' style=\'position:absolute;top:-10px;left:-20px;background-image:url(\'images/imm.png\');width:399px;height:503px\'></div>'); 
    $('#main').append($el1); 
    $('#main').append($el2); 
    $('#main').append($el3); 
    $('#main').append($el4); 
});

然而，一旦顯示字體不可風格，因爲他們應該和圖像不加載（這意味着谷歌的字體沒有應用，使用默認設置，如果指定font-family沒有工作顯示我的文字）。

我相信這是常見的東西，但無法找到關於此問題的問題。該怎麼辦？

來源

2013-10-20 Andry

你確定字體真的下載？您可以在Web開發人員工具/ Firebug中查看它。你使用哪個瀏覽器？ – tpolyak

的JQuery可以幫你做同樣的在一個更可讀的方式（通過避免一些headhakes的方式）。

var $el3 = $('<div >Hello2.</div>') 
       .css({ 
        'width':'350px', 
        'height':'200px', 
        'position':'absolute', 
        'top':'110px', 
        'left':'425px', 
        'font-family':"'Open Sans',sans-serif;font-weight:400;font-size:19px"});

來源

2013-10-20 17:27:10

那是因爲你用引號把事情搞糟了 - 你'開始style屬性的值，然後你font-family聲明的第一'再次結束它。

只需使用雙引號爲style屬性的值 - 你可以不進行轉義做，因爲JavaScript的文本文字使用'作爲分隔符 - 然後離開了font-family逃脫單引號：

var $el1 = $('<div style="position:…;font-family:\'Oxygen\',sans-serif;…font-size:35px">Hello1</div>');

來源

2013-10-20 16:56:19 CBroe

看起來像它的一個報價問題，請嘗試

var $el1 = $('<div style="position:absolute;top:50px;left:425px;font-family:\'Oxygen\',sans-serif;font-weight:300;font-size:35px">Hello1</div>'); 
    var $el2 = $('<div style="width:350px;height:200px;position:absolute;top:110px;left:425px;font-family:\'Open Sans\',sans-serif;font-weight:400;font-size:19px">Hello2.</div>'); 
    var $el3 = $('<div style="width:350px;height:200px;position:absolute;top:110px;left:425px;font-family:\'Open Sans\',sans-serif;font-weight:400;font-size:19px">Hello3.</div>'); 
    var $el4 = $('<div id=\'imm\' style="position:absolute;top:-10px;left:-20px;background-image:url(\'images/imm.png\');width:399px;height:503px"></div>');

來源

2013-10-20 16:56:33 Musa

您是雙封閉單引號：

$('<div style=\'posiblablafont-family:\'Oxygen\',font-size:35px\'>Hello1</div>'); 
USE " here ---^          AND HERE --^

來源

2013-10-20 16:57:11 Nelson

jQuery的動態添加文本將不會加載網頁的字體樣式

回答

相關問題