预览字体，然后再上传

Question

我希望在<input type="file">输入中选择字体文件后对其进行预览。

我尝试了一种类似于预览图像的方法（类似于此答案），但是使用的是Font对象而不是Image对象。但是，设置了字体后，字体无法加载src，因为它会搜索系统上安装的字体，但使用临时名称。

我怎样才能做到这一点？

Answer 1

就是这样（尽管这更多的是猜测，而不是经过教育/测试的答案）：

通过使用 fileReader 类并在新的 css 定义中将读取文件对象结果属性附加到文档，在上传之前预览字体（在现代浏览器中）@font-face：

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