在上传之前预览字体

Question

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

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

我该怎么做？

Answer 1

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

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

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