Base64로 인코딩 된 웹 글꼴의 "onload"를 감지하는 방법은 무엇입니까?

DOM에 액세스하여 페이지의 웹 글꼴로드시기를 어떻게 감지합니까?Base64로 인코딩 된 웹 글꼴의 "onload"를 감지하는 방법은 무엇입니까?

29 개의 .ttf 글꼴이 base64로 인코딩되어 단일 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 Loader를 사용할 때 CSS 스타일 시트에 대한 중복 링크를 HTML에 포함해야합니다.

출처

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로 인코딩 된 웹 글꼴의 "onload"를 감지하는 방법은 무엇입니까?

답변

관련 문제