Base64でエンコードされたWebフォントの "onload"を検出するにはどうすればよいですか？

ページのWebフォントがロードされたときにDOMにアクセスして検出するにはどうすればよいですか？Base64でエンコードされたWebフォントの "onload"を検出するにはどうすればよいですか？

29個の.ttfフォントがbase64で1つのCSSファイルにエンコードされています。私はまた、ブラウザに各フォントをメモリに読み込ませるために、各フォントを使用するページに隠されたdivを持っています。そのプロセスには時間がかかるので、ブラウザが各フォントをメモリにロードした後、AJAXイベントをキューに入れて起動する必要があります。

*私はdocument.readyとwindow.onloadが近づいていることを知っていますが、外部リソースの残りの部分が読み込まれてAJAXを早く消火する前にイベントを発生させたいと思います。

（jQueryの最後の手段として、してください）

================

を追加しましたサンプルコード：

HTML

<head> 
... 
<link type="text/css" rel="stylesheet" href="TTF-embedded-fonts.css" /> 
<script type="text/javascript" src="load-fonts.js"></script> 
</head>

負荷-FO nts.js

var ST1 = document.createElement('div'); 
ST1.setAttribute('id', 'fontloader'); 
ST1.innerHTML = "<span style='font-family:samplefont'>a<b>b<i>c</i></b><i>d</i></span> ... "; 
ST1.style.cssText = "height:0px;text-indent:-9999px;visibility:hidden"; 

window.document.body.onload = appendST1(); 
function appendST1() { document.body.appendChild(ST1) }; 

[FONT-LOAD HANDLER HERE] { API.Ajax.loadComplete("load-fonts.js") };

TTF-fonts.css包埋

@font-face { 
    font-family: 'samplefont'; 
    src: url(data:font/truetype;charset=utf-8;base64,AAAE...) format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'samplefont'; 
    src: url(data:font/truetype;charset=utf-8;base64,AAAE...) format('truetype'); 
    font-weight: bold; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'samplefont'; 
    src: url(data:font/truetype;charset=utf-8;base64,AAAE...) format('truetype'); 
    font-weight: normal; 
    font-style: italic; 
} 

@font-face { 
    font-family: 'samplefont'; 
    src: url(data:font/truetype;charset=utf-8;base64,AAAE...) format('truetype'); 
    font-weight: bold; 
    font-style: italic; 
}

出典

2011-07-28 Brandon Lebedev

あなたは何を意味しているのでしょうか？ –

@James - 私は私が働いているもののコピーを投稿しました。 –

Google's WebFont Loaderは、この問題を解決します。 custom moduleを使用してCSSをロードし、six javascript callback eventsのいずれかを使用して、フォントの読み込みおよび/または読み込みに失敗したことを知らせます。

私はこの方法をテストしました。 Base64でエンコードされたフォントと定期的にリンクされたフォントで動作します。

* javscript以外のフォールバックの場合は、Google WebFontローダーを使用しているときに、HTMLにCSSスタイルシートへの重複したリンクを含めるようにしてください。

出典

2011-07-29 22:15:00

は、私はそれが正しくページに書かれてきていることを確認するST1.style.cssText = "height:0px;text-indent:-9999px;visibility:hidden";行をコメントアウトします開始します。

<span>タグの後ろに<script>タグを追加することが解決策であると思われます（ただしおそらく最良ではありません）。

"<span style='font-family:samplefont'>1a<b>b<i>c</i></b><i>d</i></span>" 
+ "<scrip" + "t type=\"text/javascr" + "ipt\">\n" 
+ "Code Goes here" 
+ "\n</scri" + "pt>"

そして、あなたはそれを持っている場合、私はjQueryを介して、それを追加します。

var ST1 = $("<div><span style='font-family:samplefont'>1a<b>b<i>c</i></b><i>d</i></span><scrip" 
+ "t type=\"text/javascr" + "ipt\">\n" 
+ "Code Goes here" 
+ "\n</scri" + "pt></div>"); 
$(document.body).append(ST1);

出典

2011-07-29 01:01:28

Base64でエンコードされたWebフォントの "onload"を検出するにはどうすればよいですか？

答えて

関連する問題