Jquery 在下拉列表中动态显示google web字体以及相应的字体权重

我创建了一个函数，可以在

选择中添加谷歌字体。但我有两个问题：

我不得不在变量
font
中手动添加所有google字体名称
我找不到一种方法来添加字体支持的
font-weight
，因为所有google字体都不支持所有
font-weight
100-900
是否有任何方法可以使用相应的
字体权重动态添加google字体


（函数（$）{
$.fn.webfonts=函数（字体）{
var font_set=“”；
font_set=font；
var fonts=[“阿贝兹”、“阿贝尔”、“阿布里尔·法特face”、“Aclonica”、“Acme”、“Actor”、“Adamina”、“Advent Pro”、“Aguafina脚本”、“Akronim”、“Aladin”、“Aldrich”、“Alef”、“Alegreya”、“Alegreya SC”、“Alegreya Sans”、“Emilys Candy”、“订婚”、“Englebert”、“Enriqueta”、“Erica One”、“Esteban”、“欣快感脚本”、“Ewert”、“Exo”、“Exo”、“Exo 2”、“Lato”、“联盟脚本”、“Leckerli One”、“Ledger”“莱克顿”、“柠檬”、“巴斯克维尔自由行”、“救生员”、“丽丽塔一号”、“百合剧本一号”、“聚光灯”、“林登山”、“龙虾”、“龙虾二号”、“朗德里纳轮廓”、“朗德里纳阴影”、“朗德里纳素描”、“朗德里纳固体”、“劳拉”、“爱你如姐妹”、“被国王所爱”、“情人争吵”、“最幸运的家伙”、“气味意味着切伊”、“越位”、“老标准TT”、“保利”、“蓬皮埃”“蓬塔诺圣”、“波平斯”、“利加特圣”、“利加特圣”、“利加特圣板”、“普拉加蒂窄”、“普拉塔”、“普雷维黑尔”、“新闻发布会开始2P”、“索菲亚公主”、“普罗西奥诺”、“普罗斯托一号”、“清教徒”、“紫色钱包”、“全多”、“匡提科”、“四世纪”、“四世纪圣”、“魁地亚”、“流沙”、“精粹”、“奎格利”、“无一号赛车”、“拉德利”、“拉贾尼”、“雷威”，“Raleway圆点”、“Ramabhadra”、“Ramaraja”、“Rambla”、“Rammetto One”、“Ranchers”、“Rancho”、“Ranga”、“Remination”、“Ravi Prakash”、“Redredredreded”、“Reenie Beanie”、“Revalia”、“铑自由”、“Ribeye”、“Ribeye骨髓”、“正义”、“Risque”、“Roboto”、“Roboto浓缩”、“Roboto Mono”、“Roboto Slab”]；
var font_preview=0；
var font_list='None'；
对于（var i=0；i

您需要通过以下方式获取字体列表和权重，而不是手动填充字体列表和权重：

呼叫
https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY将产生：

{
 "kind": "webfonts#webfontList",
 "items": [


[...]

{
   "kind": "webfonts#webfont",
   "family": "Anonymous Pro",
   "variants": [
    "regular",
    "italic",
    "700",
    "700italic"
   ],
   "subsets": [
    "greek",
    "greek-ext",
    "cyrillic-ext",
    "latin-ext",
    "latin",
    "cyrillic"
   ],
   "version": "v3",
   "lastModified": "2012-07-25",
   "files": {
    "regular": "http://themes.googleusercontent.com/static/fonts/anonymouspro/v3/Zhfjj_gat3waL4JSju74E-V_5zh5b-_HiooIRUBwn1A.ttf",
    "italic": "http://themes.googleusercontent.com/static/fonts/anonymouspro/v3/q0u6LFHwttnT_69euiDbWKwIsuKDCXG0NQm7BvAgx-c.ttf",
    "700": "http://themes.googleusercontent.com/static/fonts/anonymouspro/v3/WDf5lZYgdmmKhO8E1AQud--Cz_5MeePnXDAcLNWyBME.ttf",
    "700italic": "http://themes.googleusercontent.com/static/fonts/anonymouspro/v3/_fVr_XGln-cetWSUc-JpfA1LL9bfs7wyIp6F8OC9RxA.ttf"
   }
  },
  {
   "kind": "webfonts#webfont",
   "family": "Antic",
   "variants": [
    "regular"
   ],
   "subsets": [
    "latin"
   ],
   "version": "v4",
   "lastModified": "2012-07-25",
   "files": {
    "regular": "http://themes.googleusercontent.com/static/fonts/antic/v4/hEa8XCNM7tXGzD0Uk0AipA.ttf"
   }
  },

[...]

]
}

作为构建步骤的一部分，您可以脱机执行此操作（即获取一次JSON，并假设它不会频繁更新），甚至可以动态执行（尽管这可能是一种过度使用）.
我看过google font api。但是文档让我难以理解！如果你有任何JSFIDLE或工作示例，请告诉我。我刚刚又看了一遍，页面上的指南很容易理解。你需要一个google帐户。然后你请求一个api密钥。将该密钥粘贴到上面URL的末尾，你就会得到JSON文件。Y您可以在API explorer（）中尝试API。您需要知道如何1）从JavaScript代码发出AJAX请求2）解析生成的JSON。实际上，我没有任何使用API的经验。还有JSON数据类型。我甚至尝试了以下解决方案，但出现了错误（使用了google的API）---