0

https://stackoverflow.com/q/5065542/1716774
同じ機能をフィドルに適用したい

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);
    });​

を使用して、選択ボックスにgoogleAPIフォントを追加しようとしました

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

これを私のフィドルに追加する方法

4

2 に答える 2

4

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);
于 2012-12-07T10:21:34.527 に答える
1

Google Fonts API呼び出しはJSONを返すため、JSONの結果を反復処理してSELECTに入力するにはJavaScriptが必要になります。また、ユーザーがフォントの1つを選択する場合、ユーザーが選択したアイテムを使用して、Googleからの正しいスクリプトを動的に含める必要があります。その方法の詳細については、APIドキュメントのこの部分をお読みください。

于 2012-12-07T05:13:30.973 に答える