在上传字体之前预览字体

Question

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

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

我该怎么做？

Answer 1

所以它确实存在（虽然它比受过教育/测试过的答案更具猜测性）：

使用fileReader类＆amp ;;在上传之前（在现代浏览器中）预览字体。在新的@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]);
        }
     }