在上傳之前預覽字體

Question

我希望在<input type="file">輸入中選擇一個字體文件之後預覽字體文件。

我試過類似於用於預覽圖像（類似於this answer）的方法，但使用Font object而不是Image對象。但是，在設置了src之後，字體無法加載，因爲它搜索系統上安裝的字體，但是以臨時名稱搜索。

我該怎麼做？

Answer 1

所以有它（雖然它是一個多受過教育/測試答案猜測）：

預覽它上傳之前的字體（在現代的瀏覽器）使用的FileReader類&附加到文檔在新@font-face CSS定義讀取文件對象result屬性：

function previewfonts(input) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
       $('<style>'+ 
        '@font-face{'+ 
         'font-family: preview;'+ 
         'src: url('+e.target.result+');'+ 
         '}'+ 
         '.preview {font-family: preview;}'+ 
        '</style>'+ 
        '<div class="preview">lorem ipsum...</div>').appendTo($(document)); 

      } 

      reader.readAsDataURL(input.files[0]); 
     } 
    }