8

JavaScript FileReader および/または CSS @font-face に問題があります (または、HTML DOM の問題である可能性があります - よくわかりません)。
デスクトップからフォント ファイルをドラッグし、HTML5 のドラッグ アンド ドロップの助けを借りてブラウザのウィンドウにドロップし、Fileオブジェクトを受け取って処理しようとしています。
これを行う JavaScript コードは次のとおりです。

//getting the File object
var file = e.dataTransfer.files[0];
var reader = new FileReader();
reader.onload = function(event) {
    var contents = event.target.result;
    //most important thing here - appending style into HEAD (jQuery)
    $('head').append('<style type="text/css">@font-face { font-family:"myFont";
    src: url("'+contents+'"); }</style>');
};

reader.onerror = function(event) {
    console.error("File could not be read! Code " + event.target.error.code);
};

//read file
reader.readAsDataURL(file);

headに追加された最終的な CSSは次のようになります。

<style type="text/css">
    @font-face {
        font-family: "myFont";
        src: url("data:;base64;Ahs5hD3..."); // here come's the URL of 'cached' font. A lots of letters and digits
    }
</style>

CSS自体は問題なく追加されています。問題は、font-family が適用されていないことです。魔法全体の後、Firebug（またはChromeに相当するもの）を使用して、いくつかの要素のfont-familyを「myFont」に設定しますが、デフォルトのフォント（Times new romanだと思います）を適用します。

これを達成するためにフォントをアップロードできることは知っていますが（PHPなどを使用）、それは重要ではありません。

ここで考えられる質問は次のとおり
です。1. CSS スタイルをオンザフライで追加して、リロードせずに使用することは可能ですか (firebug で可能であれば、おそらく TRUE です)? 2. javascript getAsDataUrl
関数 によって返されるような、まだアップロードされていない (ローカル?) リソースからフォント ファイルを使用することは可能ですか(TRUE - 画像ファイルで可能です)? したがって、状況によっては両方のことが可能ですが、何が間違っているのでしょうか? (ファイルの MIME タイプでしょうか? @font-face srcパラメーターの "data:" 部分が空であることに注意してください)

4

1 に答える 1

1

私は今それを試す時間がありませんが、あなたのコードを読んだので、データURIでMIME時間をサポートしていないという問題があるかもしれません/そうあるべきです:

 src: url("data:;base64;Ahs5hD3..."

かなり「積極的な」反例：

src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRg

私はそれを試して掘り下げることに戻ります。

于 2014-12-19T14:29:21.343 に答える