Google WebフォントURLからフォント名を取得する方法URL

Question

Google Fonts APIを見てみると、このような通常のフォントリンクから各フォントのフォント名を取得できるものは見つかりませんでした。私はGoogleのWebfonts URLからすべてのフォント名を取得できますか

https://fonts.googleapis.com/css?family=Droid+Serif:400,700,700i|Merriweather:300,400,700,900i|Open+Sans+Condensed:300,300i,700 

？。

Answer 1

1. ルック：https://fonts.google.com/specimen/Open+Sans?selection.family=Open+Sans
2. そして、それを使用するフォントを選択します。
3. をクリックしてください：右下隅
4. ルック：CSSで指定してください。

完了！

Answer 2

これは、次のようなコードを使用して行うことができます。

function getParameterByName(name, url) { 
    if (!url) url = window.location.href; 
    name = name.replace(/[\[\]]/g, "\\$&"); 
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), 
     results = regex.exec(url); 
    if (!results) return null; 
    if (!results[2]) return ''; 
    return decodeURIComponent(results[2].replace(/\+/g, " ")); 
} 

var googleFontUrl = 'https://fonts.googleapis.com/css?family=Droid+Serif:400,700,700i|Merriweather:300,400,700,900i|Open+Sans+Condensed:300,300i,700'; 
var fontFamilies = getParameterByName('family', googleFontUrl).split('|'); 
var fontArr = []; 
fontFamilies.forEach(function(item) { 
    fontArr.push(item.split(':')[0]); 
}); 

alert(fontArr.join(', ')); 

JSFiddle：https://jsfiddle.net/5qvpg606/

説明：

1. まず、getParameterByName機能を使用してURLからfamilyパラメータの値を取得します。この例では、familyパラメータの値が「ドロイドセリフ：400,700,700i |メリウェザー：300,400,700,900i |オープンなき要約：300,300i、700」

2. は、次にフォントファミリを取得するために、配列に値を分割します。私たちはJS String .split()メソッドを "|"セパレータとして。配列内の項目は、「Droid Serif：400,700,700i」、「Merriweather：300,400,700,900i」、「Open + Sans Condensed：300」です。

3. 配列をループし、区切り文字として "："を使用して各項目（文字列）を分割し、最初の部分（姓を含む）を取得してfontArrにプッシュすると、 Droid Serif "、" Merriweather "、" Open Sans Condensed "の3種類があります。結果を表示するには

4. は、単純に配列に参加：fontArr.join(', ')