添加 google font api 以选择菜单

Question

我正在使用 google fonts API 中的所有字体制作一个选择框。我已经引用了这个https://developers.google.com/webfonts/docs/developer_api链接来了解有关 API 的更多信息，但到目前为止我还无法做到。

\n\n

我添加了我为此制作的小提琴。

\n\n

超文本标记语言

\n\n

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

\n\n

CSS

\n\n

 #custom_text{ resize: none;}\xe2\x80\x8b\n

\n\n

脚本

\n\n

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

\n\n

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

\n\n

我如何将这些字体链接到小提琴中的选择框？

\n

Answer 1

这是一个老问题，我没有找到任何像我想要的那样好的东西，所以我开发了自己的选择器：

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>