动态加载Web字体

Question

我是这个网络字体的新手.我知道某个字体可以从URL下载并在网页中使用.

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

Answer 1

试试这个(对于Google网络字体):

<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;
    }
}

http://jsfiddle.net/zejz2tkp/1/

此代码基于以下帖子:http://amirush.blogspot.ro/2013/07/dynamic-loading-of-web-fonts.html

您还可以使用现有答案之一:使用javascript和jquery加载外部字体或动态加载字体html jquery