添加谷歌字體API以選擇菜單

Question

我正在使用谷歌字體API中的所有字體的選擇框。我已經提到了這個https://developers.google.com/webfonts/docs/developer_api的鏈接，以瞭解更多關於API的知識，但直到現在我還無法做到。我爲此添加了Fiddle。

HTML

 <select id="styleFont"> 
      <option value="0">Myraid Pro</option> 
      <option value="1">Sans ref</option> 
      <option value="2">Times New Roman</option> 
      <option value="3"> Arial</option> 
     </select> 
<br> 
    <textarea id="custom_text"></textarea> 

CSS

#custom_text{ resize: none;}​ 

腳本

 $("#styleFont").change(function() { 
    var id =$('#styleFont option' + ':selected').text();  
    $("#custom_text").css('font-family',id); 
    });​ 

我的API密鑰https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyB8Ua6XIfe-gqbkE8P3XL4spd0x8Ft7eWo

我怎麼能在殲這些字體鏈接到我的選擇框iddle？

Answer 1

只需使用jQuery來獲取字體列表，然後每個字體添加到您的選擇：

$.getJSON("https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyB8Ua6XIfe-gqbkE8P3XL4spd0x8Ft7eWo", function(fonts){ 
    for (var i = 0; i < fonts.items.length; i++) {  
    $('#styleFont') 
     .append($("<option></option>") 
     .attr("value", fonts.items[i].family) 
     .text(fonts.items[i].family)); 
    }  
}); 

編輯：本品採用JSONP

function SetFonts(fonts) { 
    for (var i = 0; i < fonts.items.length; i++) {  
    $('#styleFont') 
     .append($("<option></option>") 
     .attr("value", fonts.items[i].family) 
     .text(fonts.items[i].family)); 
    }  
} 
var script = document.createElement('script'); 
script.src = 'https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyB8Ua6XIfe-gqbkE8P3XL4spd0x8Ft7eWo&callback=SetFonts'; 
document.body.appendChild(script);