Динамически загружать веб-шрифт

Question

Я новичок в этом веб-шрифте. Я понимаю, что определенный шрифт можно загрузить с URL-адреса и использовать на веб-странице.

Мой вопрос: возможно ли загружать веб-шрифт динамически в зависимости от пользовательского ввода? Просто сценарий: введите тип пользователя в текстовом поле и выберите имя шрифта, которое было , но не. Некоторое javascript-код запускается для динамической загрузки ресурса веб-шрифтов. Это возможно?

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/

Этот код bassed на этот пост: http://amirush.blogspot.ro/2013/07/dynamic-loading-of-web-fonts.html

Вы также можете использовать один из существующих ответов: Load external font with javascript and jquery или dynamically load fonts html jquery