[英]Adding google font api to select menu
我正在制作一個包含谷歌字體 API 中所有字體的選擇框。 我已參考此https://developers.google.com/webfonts/docs/developer_api鏈接來了解有關 API 的更多信息,但直到現在我還無法做到。
我正在添加我為此制作的小提琴。
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
如何將這些字體鏈接到小提琴中的選擇框?
只需使用 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);
這是一個老問題,我沒有找到我想要的好東西,所以我開發了自己的選擇器:
Github https://github.com/maPer77/Select2-Google-Fonts
演示: https ://maper77.github.io/Select2-Google-Fonts/
看到它工作:
selectGfont({ key: 'AIzaSyDlD2NdRw4MDt-jDoTE_Hz3JqNpl154_qo', containerFonte: '#selectGFont', containerVariante: '#selectGFontVariante', sort: 'popularity', onSelectFonte: 'sGFselecionado' }); sGFselecionado = function(fonte, variante, json){ console.log( 'fonte', fonte ); console.log( 'variante', variante ); console.log( 'json', json ); };
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"> <link href="https://select2.github.io/select2-bootstrap-theme/css/select2-bootstrap.css" rel="stylesheet"> <link href="https://maper77.github.io/Select2-Google-Fonts/src/selectGfont.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js"></script> <script src="https://maper77.github.io/Select2-Google-Fonts/src/selectGfont.min.js"></script> <div class="row justify-content-center"> <!-- Fonte GOOGLE --> <div class="col-md-12 col-lg-10 col-xl-8"> <label><span class="selectGFontTotal"></span> Google Fonts</label> <div class="input-group input-group-lg"> <select id='selectGFont' data-default='Play' class="form-control invisible"></select> <div class="input-group-append"> <select id='selectGFontVariante' data-default='regular' class="form-control invisible"></select> </div> </div> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.