添加谷歌字体api来选择菜单

Posted 2023-03-15

【中文标题】添加谷歌字体api来选择菜单

【英文标题】：Adding google font api to select menu

【发布时间】：2012-11-25 06:48:27

【问题描述】：

我正在制作一个包含谷歌字体 API 中所有字体的选择框。我已经参考了这个 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

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

【问题讨论】：

你到底想做什么？

@trebuchet 我正在尝试在我的选择中添加 Google 字体 API 列表。我已经获得了我的 API 密钥 googleapis.com/webfonts/v1/… 现在我需要将我的选择与它连接

@trebuchet 它在 jsbin 中运行良好但是当我将所有代码复制到我的 html 页面时它无法正常工作是什么问题或我必须添加什么

【参考方案1】：

只需使用 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);

【讨论】：

请你看看这个jsbin.com/ocutuk/1 并找出我犯错的地方

啊 - 我知道这个问题。 Chrome 不会让您访问外部 URL，而 firefox 会...

这就是问题，谢谢老兄，它显示了所有的文本名称，但没有在 textarea jsbin.com/ocutuk/3 中更改字体系列

查看我的编辑 - 使用 JSONP 使这项工作成为必要。至于为什么你的字体不加载 - 每个谷歌字体必须单独加载。您的代码没有加载任何内容。

老兄它的工作 jsbin.com/ocutuk/3/edit 但问题是字体系列只改变一次

【参考方案2】：

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

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>

【讨论】：

嗨，很棒的插件！奇迹般有效。我可以知道是否有任何方法可以将字体设置为 javascript 事件中的选择输入？