Fix font loading issue by using a hidden DOM font node
This commit is contained in:
parent
4f10e93f8c
commit
ddd8aeffb9
@ -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...
|
||||||
|
Loading…
Reference in New Issue
Block a user