动态加载网络字体

Question

我是一名新手，对于这个网络字体的事情并不了解。我知道可以从URL中下载某种字体并在网页中使用。

我的问题是：是否可以根据用户输入动态加载网络字体？简单的场景是，用户在文本字段中输入一些文本并选择一个还没有被加载的字体名称。触发一些JavaScript代码来动态加载网络字体资源。这可能吗？

- lang2

---

首先，给我们一些HTML代码来操作。例如，你说你想要用户输入，那么就需要一个输入框。但是用户能否从预定义的列表中选择，或者可以使用任何字体？后者不是一个好主意，因为有很多字体是不能免费使用的。另外，你想从哪里获取网络字体？Google字体？还是其他资源？字重呢？所有可用的字重，还是只有“normal”？当用户输入所需字体时，应该发生什么？所有正文都变成那种字体吗？这是很多问题。所以请进一步具体说明。 - Bram Vanroy

https://dev59.com/IG7Xa4cB1Zd3GeqPpmx3 - Madalina Taina

这也许会有所帮助 https://dev59.com/SmQn5IYBdhLWcg3wzZ36 - Madalina Taina

以下是一个使用select的示例：http://amirush.blogspot.ro/2013/07/dynamic-loading-of-web-fonts.html http://jsfiddle.net/amir_ch/x63jF/ - Madalina Taina

Answer 1

试试这个（针对Google 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;
    }
}

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

这段代码基于这篇文章：http://amirush.blogspot.ro/2013/07/dynamic-loading-of-web-fonts.html

您也可以使用其中一个已有的答案：Load external font with javascript and jquery或dynamically load fonts html jquery

- Madalina Taina