在上传之前预览字体

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]); 
     } 
    }