javascript - 在上传之前预览字体

Question

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

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

我怎样才能做到这一点？

Answer 1

就是这样（尽管这更像是一个猜测而不是受过教育/经过测试的答案）：

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

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