选择框中的 Google API 字体

Question

https://stackoverflow.com/q/5065542/1716774
我喜欢在我的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);
    });​

我尝试使用

在我的选择框中添加 google API 字体

https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY

如何将它添加到我的小提琴中

Answer 1

使用 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=API_KEY&callback=SetFonts';
document.body.appendChild(script);

Answer 2

Google Fonts API 调用返回 JSON，因此您需要 JavaScript 来迭代 JSON 结果并使用它填充 SELECT。此外，当用户选择其中一种字体时，您需要使用用户选择的项目动态包含来自 Google 的正确脚本。 API 文档的Read this part 了解如何执行此操作的详细信息。