字體堆棧不會使用toggleClass（）或.css（）加載jQuery

Question

我正在爲殘障人士構建一個涉及展示多種字體的頁面。將會有一個按鈕窗格，或者a）調用將加載環境的不同類，或者調用jQuery .css（）函數以這種方式加載環境。

我已經得到了兩種方法的工作 - 除了字體家族的一切。我已將字體堆棧放入類中，加載類，除font-family之外的所有東西都可以工作。我還將所有內容加載到.css（）語句中 - 除了font-family之外的所有內容都可以工作。頁面上顯示的內容似乎是默認的serif瀏覽器字體。我可以調整它的大小，顏色或其他任何東西。我不能做的是將其改爲另一種字體。

現在我正在嘗試切換網頁安全字體。

這是我現在使用jQuery的：

$(document).ready(function(){ 
$("#numone").click(function(){ 
$("#texdiv").toggleClass("graybkd"); 
$("#texdiv").html("Here the text is blue on a Gray Background. Does this feel better? This font should be sans-serif, which is easier for vision-impaired people to read..."); 

}); 
}); 

當使用的CSS（試試這個），該toggleClass語句被註釋掉，代碼看起來像這樣的事件處理程序後：

$("#texdiv").css({"font-family" : "Tahoma", "background-color" : "#dddddd", "border-color" : "#0000dd"}); --- etc. 

如果你想看到這是如何工作的，你可以檢查以下jsfiddle.net頁：http://jsfiddle.net/gershonb/eJapD/118/

難道連網絡安全字體必須以某種方式預取？該頁面將使用我知道必須預取的一些專業字體，但Tahoma應該給你一個很好的無襯線字體。

當一切工作除了一個小部分，這種殘骸。

感謝

葛森

Answer 1

如果我用的.css（）在你的提琴取代你.toggleClass（）的作品就好了，我在Chrome：http://jsfiddle.net/iGanja/eJapD/143/

我還創建了一個演示小提琴用css（）這裏改變FONT-FAMILY：http://fiddle.jshell.net/iGanja/3yqpg/

<h2>This is Text</h2> 

<button id="tahoma">Tahoma</button> 
<button id="arial">Arial</button> 
<button id="verdana">Verdana</button> 
<button id="times">Times New Roman</button> 
<button id="courier">Courier</button> 

<script> 
    $("#tahoma").on("click", function() {$("h2").css({"font-family":"Tahoma"}); }); 
    $("#arial").on("click", function() {$("h2").css({"font-family":"Arial"}); }); 
    $("#verdana").on("click", function() {$("h2").css({"font-family":"Verdana"}); }); 
    $("#times").on("click", function() {$("h2").css({"font-family":"Times New Roman"}); }); 
    $("#courier").on("click", function() {$("h2").css({"font-family":"Courier"}); }); 
</script>