如何从 Google Webfonts URL 获取字体名称答案

【问题标题】：How to Get Font Names From Google Webfonts URL如何从 Google Webfonts URL 获取字体名称
【发布时间】：2016-08-10 22:40:14
【问题描述】：

查看Google Fonts API 并找不到任何可以让我从像这样的普通字体链接中获取每种字体的字体名称的东西。

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

如何从 Google Webfonts URL 获取所有字体名称？

【问题讨论】：

标签： javascript fonts google-font-api

【解决方案1】：

可以使用如下代码来完成。

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/

解释：

首先，使用getParameterByName 函数从URL 中检索family 参数的值。在此示例中，family 参数的值为“Droid Serif:400,700,700i|Merriweather:300,400,700,900i|Open Sans Condensed:300,300i,700"
然后将值拆分为一个数组以获取字体系列。我们使用带有“|”的 JS String .split() 方法作为分隔符。现在数组中的项目是：“Droid Serif:400,700,700i”、“Merriweather:300,400,700,900i”和“Open+Sans Condensed:300”。
遍历数组，使用“:”作为分隔符拆分每个项目（字符串），获取第一部分（包含姓氏）并将其推送到fontArr，这样你就会得到一个数组包含“Droid Serif”、“Merriweather”和“Open Sans Condensed”。
要查看结果，只需加入数组即可：fontArr.join(', ')

【讨论】：

谢谢你，我会试试看。你做了这个功能还是在其他地方找到了它？您介意解释一下发生了什么，以便我更好地理解吗？
我已经添加了解释。 getParameterByName 函数取自 here。剩下的就是我的主意了。

【解决方案2】：

看：https://fonts.google.com/specimen/Open+Sans?selection.family=Open+Sans
然后选择要使用的字体。
点击：右下角
看：在 CSS 中指定。

完成！

【讨论】：

你误会了。我希望使用 javascript 选择任何字体来动态执行此操作。
我明白了，我对 js 了解不多，但如果你能得到 url 的字体名称和带空格的 raplace +，你可以使用它。使用 = 和 : 作为分隔符。