Javascript 动态加载web字体

我不熟悉这种网页字体。我知道某种字体可以从URL下载并在网页中使用

---

我的问题是：是否可以根据用户输入动态加载web字体？简单场景：用户在文本字段中键入一些文本，然后选择尚未加载的字体名称。触发某些javascript代码以动态加载web字体资源。这可能吗？

在谷歌网页字体上试试这个：

<span>Select font:</span>
<select onchange=fontSelected(event)>
    <option value="default">Browser Default</option>
    <option value="Droid+Sans">Droid Sans</option>
    <option value="Open+Sans">Open Sans</option>
</select>
<h1 id="theText">This is a sample text...</h1>

function fontSelected(e){
    var select = e.target;
    if (select.selectedIndex > 0) { // web font
        var fontID = select.options[select.selectedIndex].value;
        if (!document.getElementById(fontID)) {
            var head = document.getElementsByTagName('head')[0];
            var link = document.createElement('link');
            link.id = fontID;
            link.rel = 'stylesheet';
            link.type = 'text/css';
            link.href = 'http://fonts.googleapis.com/css?family='+fontID;
            link.media = 'all';
            head.appendChild(link);
        }
        document.getElementById("theText").style.fontFamily = select.options[select.selectedIndex].innerHTML;
    }else{ // default browser font
        document.getElementById("theText").style.fontFamily = null;
    }
}

此代码基于此帖子：

---

您也可以使用现有的答案之一：或

开始，给我们一些HTML来处理。例如，您说您需要用户输入，所以有一个输入字段。但是，用户应该能够从预定义的列表中进行选择，还是可以选择任何字体？后者不是一个好主意，因为有很多字体是不能免费使用的。另外，您想从哪里获得您的webfonts？谷歌字体？还是其他资源？那么体重呢？所有可用重量，还是仅正常？当用户输入他或她想要的字体时会发生什么？所有正文文本都应该成为那种字体吗？有很多问题。因此，请进一步说明。这可能也有帮助，下面是一个带有select的示例