गतिशील रूप से वेब फ़ॉन्ट लोड करें

Question

मैं इस वेब फ़ॉन्ट चीज़ के लिए नया हूं। मैं समझता हूं कि एक निश्चित फ़ॉन्ट को एक यूआरएल से डाउनलोड किया जा सकता है और वेब पेज में इस्तेमाल किया जा सकता है।

मेरा प्रश्न है: क्या उपयोगकर्ता इनपुट के आधार पर गतिशील रूप से एक वेब फ़ॉन्ट लोड करना संभव है? बस परिदृश्य: पाठ फ़ील्ड में कुछ पाठ में उपयोगकर्ता टाइप करें और एक फ़ॉन्ट नाम का चयन करें जो अभी तक लोड नहीं हुआ था। कुछ जावास्क्रिप्ट कोड गतिशील रूप से एक वेब फ़ॉन्ट संसाधन लोड करने के लिए ट्रिगर किया गया है। क्या यह संभव है?

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