Web-Schriftart dynamisch laden

Ich bin neu in dieser Web-Schriftart Sache. Ich verstehe, dass eine bestimmte Schriftart von einer URL heruntergeladen und in einer Webseite verwendet werden kann.Web-Schriftart dynamisch laden

Meine Frage ist: ist es möglich, eine Web-Schriftart dynamisch abhängig von der Benutzereingabe zu laden? Einfaches Szenario: Benutzer geben etwas Text in das Textfeld ein und wählen einen Schriftnamen aus, der nicht geladen wurde. Ein gewisser JavaScript-Code wird ausgelöst, um eine Webfont-Ressource dynamisch zu laden. Ist das möglich?

Quelle

2015-09-11 lang2

Beginnen Sie, indem Sie uns etwas HTML geben, um damit zu arbeiten. Zum Beispiel sagen Sie, dass Sie eine Benutzereingabe wünschen, also gibt es ein Eingabefeld. Aber sollte der Benutzer aus einer vordefinierten Liste auswählen können, oder kann es eine beliebige Schriftart sein? Letzteres ist keine gute Idee, da es viele Schriftarten gibt, die nicht kostenlos verwendet werden können. Wo willst du deine Webfonts herbekommen? Google Schriftarten? Oder eine andere Ressource? Und was ist mit Gewichten? Alle verfügbaren Gewichte oder nur "normal"? Und was soll passieren, wenn der Benutzer die gewünschte Schriftart eingibt? Sollte der gesamte Text zu dieser Schriftart werden? Eine Menge Fragen. Also bitte weiter spezifizieren. –

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

Dies hilft auch http://stackoverflow.com/questions/16553326/dynamically-load-google-fonts-after-page -has-loaded –

Versuchen Sie, diese (für Google Web Fonts):

<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/

Dieser Code zu diesem Beitrag bassed ist: http://amirush.blogspot.ro/2013/07/dynamic-loading-of-web-fonts.html

Sie auch eine der vorhandenen Antworten verwenden können: Load external font with javascript and jquery oder dynamically load fonts html jquery

Quelle

2015-09-11 14:47:49

Antwort

Verwandte Themen