Question

我需要获取Google字体上所有可用字体的列表，并在下拉列表中显示这些字体，但我无法理解Google字体的文档。

这是我到目前为止所得到的。

当我在网络浏览器中进行此操作时，我会按预期获得所有字体的json响应：

https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity&key={my-key-here}

但是当我ajax它时，我在控制台中得到它：

XMLHttpRequest cannot load https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity&key={my-key-here}. Origin {domain} is not allowed by Access-Control-Allow-Origin.

顺便说一句，我正在使用jQuery。尝试了$.ajax和$.getJSON。

经过一段谷歌搜索后，我意识到可能需要使用webfont loader来检索列表？好吧，公平。所以我将脚本添加到页面中：

<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>

但那又怎么样？ API似乎只允许获取和应用特定字体，它实际上不会返回任何数据，是吗？

有人能指出我正确的方向或告诉我如何提出请求吗？解析返回的数据并在之后处理它并不是什么大问题，但我无法弄清楚如何实际获取数据。

Answer 1

好的，我遇到了同样的问题，在新窗口中打开URL本身工作正常，但它不能用作ajax请求。

你的ajax / json请求是正确的：

https://www.googleapis.com/webfonts/v1/webfonts?key={my-key-here}

你不需要添加此行：

<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>

好像你没有得到任何因为谷歌服务器，而不是你的代码。如果您新创建了API密钥，或者您最近激活了webfont服务，给它几分钟，您将很快能够使用您的webfont服务

只是为了确认一下，尝试下面的JSON请求，它完美无缺：

$(document).ready(function() {
    $.getJSON('https://www.googleapis.com/webfonts/v1/webfonts?key=MY_API_KEY', function(response) {
        //alert('json object fetched successfully!');
    });
});

Answer 2

要检索Google Web Fonts服务提供的动态网络字体列表，请发送以下请求：

https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY

来源：Google Web Fonts API - Developer API

谷歌字体 - 通过ajax获取可用字体列表？

2 个答案: