DropDown列表中具有相应字体权重的google字体动态

Question

我创建了一个函数，用于在select中添加谷歌字体。但我有两个问题：

1. 我必须在变量fonts中手动添加所有Google字体名称。
2. 我无法找到添加字体支持的font-weight的方法，因为所有的google字体都不支持所有的font-weight 100-900

有没有办法用相应的font-weights动态添加google字体

​

(function ( $ ) {	
		$.fn.webfonts = function(font) {
			var font_set = "";
			font_set = font;

			var fonts = ["ABeeZee","Abel","Abril Fatface","Aclonica","Acme","Actor","Adamina","Advent Pro","Aguafina Script","Akronim","Aladin","Aldrich","Alef","Alegreya","Alegreya SC","Alegreya Sans","Emilys Candy","Engagement","Englebert","Enriqueta","Erica One","Esteban","Euphoria Script","Ewert","Exo","Exo 2","Lato","League Script","Leckerli One","Ledger","Lekton","Lemon","Libre Baskerville","Life Savers","Lilita One","Lily Script One","Limelight","Linden Hill","Lobster","Lobster Two","Londrina Outline","Londrina Shadow","Londrina Sketch","Londrina Solid","Lora","Love Ya Like A Sister","Loved by the King","Lovers Quarrel","Luckiest Guy","Odor Mean Chey","Offside","Old Standard TT","Poly","Pompiere","Pontano Sans","Poppins","Port Lligat Sans","Port Lligat Slab","Pragati Narrow","Prata","Preahvihear","Press Start 2P","Princess Sofia","Prociono","Prosto One","Puritan","Purple Purse","Quando","Quantico","Quattrocento","Quattrocento Sans","Questrial","Quicksand","Quintessential","Qwigley","Racing Sans One","Radley","Rajdhani","Raleway","Raleway Dots","Ramabhadra","Ramaraja","Rambla","Rammetto One","Ranchers","Rancho","Ranga","Rationale","Ravi Prakash","Redressed","Reenie Beanie","Revalia","Rhodium Libre","Ribeye","Ribeye Marrow","Righteous","Risque","Roboto","Roboto Condensed","Roboto Mono","Roboto Slab"];
			var font_preview = 0;
			var font_list = '<option value="">None</option>';

			for (var i=0; i < fonts.length; i++){
			   	font_list += '<option value="'+ fonts[i] + '">' + fonts[i] + '</option>';
			}

			this.addClass('webfonts').append(font_list);

		    $(this).find('option').each(function(){              
	            if($(this).val()==font_set ){
	                $(this).attr('selected','selected');
	            }
	        });
		};		  
  
     $('#google-fonts').webfonts();
	}( jQuery ));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="google-fonts"></select>

​

Answer 1

与其手动填充字体列表和权重，您还需要让它们通过Google字体开发者API。

调用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一次，并假设它不经常更新)，这是构建步骤的一部分，甚至是动态的(尽管这可能是过度的)。