Google 字体 - 通过 ajax 获取可用字体列表？答案

【问题标题】：Google fonts - Getting a list of available fonts through ajax?Google 字体 - 通过 ajax 获取可用字体列表？
【发布时间】：2012-12-13 09:00:59
【问题描述】：

我需要获取 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 似乎只允许获取和应用特定的字体，它实际上并没有返回任何数据，不是吗？

谁能指出我正确的方向或告诉我如何提出请求？解析返回的数据并在之后处理它没什么大不了的，但我就是不知道如何真正获取数据。

【问题讨论】：

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

标签： ajax list fonts google-font-api

【解决方案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!');
    });
});

【讨论】：

【解决方案2】：

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

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

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

【讨论】：