How to detect "onload" for base-64 encoded webfonts?
How do I access the DOM to detect when my page's webfonts have loaded?
I have 29 .ttf fonts base64-encoded into a single CSS file. I also have a hidden div on the page that uses each of the fonts, to make the browser read each of the fonts into memory. That process takes time, so I need to queue an AJAX event to fire after the browser has loaded each of the fonts into memory.
*I know that document.ready and window.onload get close, but I want to fire the event before the rest of the external resources finish loading to make the AJAX fire sooner.
(jQuery as a last resort, please)
================
Added Sample Code:
HTML
<head>
...
<link type="text/css" rel="stylesheet" href="TTF-embedded-fonts.css" />
<script type="text/javascript" src="load-fonts.js"></script>
</head>开发者_StackOverflow社区;
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") };
@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;
}
To start I would comment out the ST1.style.cssText = "height:0px;text-indent:-9999px;visibility:hidden"; line to make sure it is getting written to the page properly.
Assuming that works a solution (although probably not the best) is to add a <script> tag after the <span> tag.
"<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>"
And I would add it via jQuery if you have it:
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);
Google's WebFont Loader solves this problem. Use the custom module to load the CSS, and then use any of the six javascript callback events to signal when the fonts have loaded and/or failed to load.
I have tested this method. It works for base64 encoded fonts and regularly linked fonts.
*For non-javscript fallback, make sure to include a duplicate link to the CSS stylesheet in the HTML when using the Google WebFont Loader.
加载中,请稍侯......
精彩评论