Fix font loading issue by using a hidden DOM font node

This commit is contained in:
Julian Viereck 2011-06-22 13:19:25 +02:00
parent 4f10e93f8c
commit ddd8aeffb9

View File

@ -118,12 +118,10 @@ myWorker.onmessage = function(event) {
var styleSheet = document.styleSheets[0]; var styleSheet = document.styleSheets[0];
styleSheet.insertRule(rule, styleSheet.length); styleSheet.insertRule(rule, styleSheet.length);
// *HACK*: this makes the font get loaded on the page. WTF? We // Just adding the font-face to the DOM doesn't make it load. It
// really have to set the fonts a few time... // seems it's loaded once Gecko notices it's used. Therefore,
var interval = setInterval(function() { // add a div on the page using the loaded font.
ctx.font = "bold italic 20px " + data.fontName + ", Symbol, Arial"; document.getElementById("fonts").innerHTML += "<div style='font-family:" + data.fontName + "'>j</div>";
}, 10);
intervals.push(interval);
console.log("setup font", data.fontName); console.log("setup font", data.fontName);
onMessageState = WAIT; onMessageState = WAIT;
@ -139,16 +137,13 @@ myWorker.onmessage = function(event) {
gStack = stack; gStack = stack;
console.log("canvas stack size", stack.length) console.log("canvas stack size", stack.length)
// Shedule a timeout. Hoping the fonts are loaded after 100ms. // There might be fonts that need to get loaded. Shedule the
// rendering at the end of the event queue ensures this.
setTimeout(function() { setTimeout(function() {
// Remove all setIntervals to make the font load.
intervals.forEach(function(inter) {
clearInterval(inter);
});
tic(); tic();
renderProxyCanvas(stack); renderProxyCanvas(stack);
toc("canvas rendering") toc("canvas rendering")
}, 100); }, 0);
onMessageState = WAIT; onMessageState = WAIT;
break; break;
} }
@ -208,6 +203,7 @@ window.onload = function() {
</head> </head>
<body> <body>
<div id="fonts" style="position: absolute;display:block;z-index:-1;"></div>
<div id="controls"> <div id="controls">
<input type="file" style="float: right; margin: auto 32px;" onChange="load(this.value.toString());"></input> <input type="file" style="float: right; margin: auto 32px;" onChange="load(this.value.toString());"></input>
<!-- This only opens supported PDFs from the source path... <!-- This only opens supported PDFs from the source path...