動態加載網絡字體

我是新來的這個網絡字體的東西。我瞭解某種字體可以從URL下載並用於網頁。動態加載網絡字體

我的問題是：是否可以根據用戶輸入動態加載Web字體？簡單情況：用戶在文本字段中鍵入一些文本，並選擇一個字體名稱，該字體名稱是而不是尚未加載。一些JavaScript代碼被觸發來動態加載Web字體資源。這可能嗎？

2015-09-11 lang2

通過給我們提供一些HTML來開始工作。例如，你說你想要用戶輸入，所以有一個輸入字段。但是，用戶應該能夠從預先定義的列表中進行選擇，還是可以使用任何字體？後者不是一個好主意，因爲有很多字體不能自由使用。另外，你想從哪裏獲得你的網頁字體？谷歌字體？或另一個資源？那麼重量呢？所有可用的權重，或只有「正常」？當用戶輸入他或她想要的字體時會發生什麼？所有正文文本都應該變成這種字體嗎很多問題。所以請進一步說明。 –

http://stackoverflow.com/questions/14856721/dynamically-load-fonts-html-jquery –

這可能也有幫助http://stackoverflow.com/questions/16553326/dynamically-load-google-fonts-after-page -has-loaded –

試試這個（對於谷歌網頁字體）：

<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

來源

2015-09-11 14:47:49