添加Google字体API以选择菜单 [英] Adding google font api to select menu
问题描述
我正在使用Google字体API中的所有字体制作一个选择框.我已将此 https://developers.google.com/webfonts/docs/developer_api 链接以了解有关API的更多信息,但直到现在我还无法实现.
I am making a select box with all the fonts in google fonts API. I have referred this https://developers.google.com/webfonts/docs/developer_api link to learn more about API but till now i was not able to make it.
我正在添加为此目的制作的小提琴.
I am adding this Fiddle which i made for this.
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
如何将这些字体链接到小提琴中的选择框?
How can i link those fonts to my select box in the fiddle?
推荐答案
只需使用jquery获取字体列表,然后将每种字体添加到您选择的字体中:
Just use jquery to get the font list, then add each font to your select:
$.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);
这篇关于添加Google字体API以选择菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!