5

入力で選択されたフォント ファイルをプレビューしたいと考えてい<input type="file">ます。

画像のプレビューに使用されるアプローチと同様のアプローチを試みましたが（この回答と同様）、オブジェクトの代わりにFontオブジェクトImageを使用しました。srcただし、システムにインストールされているフォントを一時名で検索するため、設定後にフォントのロードに失敗します。

これどうやってするの？

4

1 に答える 1

1

それで、それがあります（ただし、教育/テストされた回答というよりも推測でした）：

@font-facefileReader クラスを使用し、新しい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]);
        }
     }
于 2013-02-08T05:06:41.327 に答える