Добавление Google Font API в меню выбора

Я делаю поле выбора со всеми шрифтами в API шрифтов Google. Я сослался на это https://developers.google.com/webfonts/docs/developer_api. ссылка, чтобы узнать больше об API, но до сих пор я не мог этого сделать.

Я добавляю этот 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);
    });​

Мой ключ API: https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyB8Ua6XIfe-gqbkE8P3XL4spd0x8Ft7eWo

Как я могу связать эти шрифты с моим полем выбора в скрипке?


javascript html css google-font-api
person Vivek Dragon    schedule 07.12.2012    source источник
comment
Что именно ты пытаешься сделать?   -  person trebuchet    schedule 07.12.2012
comment
@trebuchet я пытаюсь добавить список API шрифтов Google в свой выбор. Я получил ключ API: googleapis.com/webfonts/v1/ теперь мне нужно связать с ним мой выбор   -  person Vivek Dragon    schedule 07.12.2012
comment
@trebuchet отлично работал в jsbin Но когда я копирую весь код на свою html-страницу, это не так. работает в чем проблема или что я должен добавить   -  person Vivek Dragon    schedule 07.12.2012

Ответы (2)


arrow_upward
2
arrow_downward

Просто используйте 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));
    }    
});

EDIT: здесь используется 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);
person trebuchet    schedule 07.12.2012
comment
не могли бы вы просмотреть этот jsbin.com/ocutuk/1 и указать, где я допустил ошибку - person Vivek Dragon; 07.12.2012
comment
ах - я знаю проблему. Chrome не позволит вам получить доступ к внешнему URL-адресу, тогда как Firefox... - person trebuchet; 07.12.2012
comment
Это проблема, спасибо, чувак, он показывает все текстовые имена, но не меняет семейство шрифтов в текстовой области jsbin.com/ocutuk /3 - person Vivek Dragon; 07.12.2012
comment
см. мое редактирование - использование JSONP делает эту работу необходимой. что касается того, почему ваши шрифты не загружаются - каждый шрифт Google должен быть загружен отдельно. Ваш код ничего не загружает. - person trebuchet; 07.12.2012
comment
Чувак, работает jsbin.com/ocutuk/3/edit, но проблема в семействе шрифтов меняется только один раз - person Vivek Dragon; 07.12.2012
comment
Пожалуйста, используйте обновленный код, который я опубликовал — он позволяет избежать междоменных проблем и работает во всех браузерах. Что касается шрифтов - они не загружаются в ваш код. вы должны загрузить их каждый (согласно инструкциям Google на странице google.com/webfonts) - person trebuchet; 07.12.2012
comment
давайте продолжим обсуждение в чате - person Vivek Dragon; 07.12.2012
comment
он отлично работал в jsbin Но когда я копирую весь код на свою html-страницу, он не работает, что проблема в этом или что я должен добавить - person Vivek Dragon; 07.12.2012

arrow_upward
2
arrow_downward

Это старый вопрос, я не нашел для этого ничего подходящего, поэтому я разработал свой собственный селектор:

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>

person maPer77    schedule 15.09.2019