在Internet Explorer中頭部的Javascript字體注入

Question

我想在加載後將谷歌字體添加到頁面。 我使用這行

document.getElementsByTagName('head')[0].innerHTML = 
document.getElementsByTagName('head')[0].innerHTML + url; 

其中URL看起來像

"<link rel=\"stylesheet\" href=\"http://fonts.googleapis.com/css?family=..."; 

作品相當不錯，在瀏覽器，Firefox，在Android，iPhone上的Safari瀏覽器。

但是，當在IE中測試時，它會使標籤崩潰。隨着一個錯誤報告給微軟和一切。測試了兩臺不同的PC，IE 8，IE 10，Win7和Win8，結果相同。

還可以嗎？

Answer 1

爲什麼不簡單地添加頭部？

<link href='http://fonts.googleapis.com/css?family=....' rel='stylesheet' type='text/css'> 

Answer 2

您可以使用.appendChild

var head = document.getElementsByTagName("head")[0]; 
var content = document.createTextNode("<link rel=\"stylesheet\" href=\"http://fonts.googleapis.com/css?family=..."); 
head.appendChild(content); 

Answer 3

你可以只添加的字體在實際的代碼，然後通過CSS添加此風格：

<script> 
    var style = document.createElement('style'); 
    style.innerHTML = 'elements-to-add-font-to{font-family: "font name";}'; 
    document.getElementsByTagName('head')[0].appendChild(style); 
</script> 

http://jsfiddle.net/Hive7/PFF2A/