如何访问DOM以检测页面的Web字体何时加载？
我有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>
load-fonts.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-embedded-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;
}
最佳答案
首先，我会注释掉ST1.style.cssText = "height:0px;text-indent:-9999px;visibility:hidden";行，以确保它已正确写入页面。
假定可行的解决方案(尽管可能不是最好的)是在<script>标记之后添加<span>标记。
"<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);
关于javascript - 如何检测base-64编码的Webfonts的 “onload”？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6866965/