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

Question

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

这是我已经得到的内容。

当我在Web浏览器中访问此内容时，我得到了预期的所有字体的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加载器来获取列表？好吧，很公平。所以我将脚本添加到了页面中：

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

然后呢？API似乎只允许获取和应用特定的字体，它并不返回任何数据，是吗？

有人能指点我方向或者展示如何发起请求吗？解析返回的数据以及之后的处理都不是什么大问题，但是我就是搞不清楚如何实际地获取数据。

- qwerty

---

这个教程可能会对你有所帮助：http://vivekdragon.wordpress.com/2012/12/07/google-font-api-for-select/ - wandarkaf

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!');
    });
});

- evilReiko

Answer 2

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

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

来源：Google Web Fonts API - 开发者API

- underscore