Use Font.prototype.bindDOM to insert fonts on page
This commit is contained in:
parent
519fb435c3
commit
803139127a
@ -33,9 +33,24 @@ function FontWorker() {
|
|||||||
throw "Unkown action from worker: " + data.action;
|
throw "Unkown action from worker: " + data.action;
|
||||||
}
|
}
|
||||||
}.bind(this);
|
}.bind(this);
|
||||||
|
|
||||||
|
this.$handleFontLoadedCallback = this.handleFontLoadedCallback.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
FontWorker.prototype = {
|
FontWorker.prototype = {
|
||||||
|
handleFontLoadedCallback: function() {
|
||||||
|
// Decrease the number of fonts wainting to be loaded.
|
||||||
|
this.fontsWaiting--;
|
||||||
|
// If all fonts are available now, then call all the callbacks.
|
||||||
|
if (this.fontsWaiting == 0) {
|
||||||
|
var callbacks = this.fontsWaitingCallbacks;
|
||||||
|
for (var i = 0; i < callbacks.length; i++) {
|
||||||
|
callbacks[i]();
|
||||||
|
}
|
||||||
|
this.fontsWaitingCallbacks.length = 0;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
actionHandler: {
|
actionHandler: {
|
||||||
"log": function(data) {
|
"log": function(data) {
|
||||||
console.log.apply(console, data);
|
console.log.apply(console, data);
|
||||||
@ -48,41 +63,15 @@ FontWorker.prototype = {
|
|||||||
Fonts[name].properties = {
|
Fonts[name].properties = {
|
||||||
encoding: data[name].encoding
|
encoding: data[name].encoding
|
||||||
}
|
}
|
||||||
var base64 = window.btoa(data[name].str);
|
|
||||||
|
|
||||||
// Add the @font-face rule to the document
|
// Call `Font.prototype.bindDOM` to make the font get loaded on the page.
|
||||||
var url = "url(data:font/opentype;base64," + base64 + ");";
|
Font.prototype.bindDOM.call(
|
||||||
var rule = "@font-face { font-family:'" + name + "';src:" + url + "}";
|
Fonts[name],
|
||||||
var styleSheet = document.styleSheets[0];
|
data[name].str,
|
||||||
styleSheet.insertRule(rule, styleSheet.length);
|
// IsLoadedCallback.
|
||||||
|
this.$handleFontLoadedCallback
|
||||||
// Just adding the font-face to the DOM doesn't make it load. It
|
);
|
||||||
// seems it's loaded once Gecko notices it's used. Therefore,
|
|
||||||
// add a div on the page using the loaded font.
|
|
||||||
var div = document.createElement("div");
|
|
||||||
var style = 'font-family:"' + name +
|
|
||||||
'";position: absolute;top:-99999;left:-99999;z-index:-99999';
|
|
||||||
div.setAttribute("style", style);
|
|
||||||
document.body.appendChild(div);
|
|
||||||
this.fontsWaiting --;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.fontsWaiting == 0) {
|
|
||||||
console.timeEnd("ensureFonts");
|
|
||||||
}
|
|
||||||
|
|
||||||
// This timeout is necessary right now to make sure the fonts are really
|
|
||||||
// loaded at the point the callbacks are called.
|
|
||||||
setTimeout(function() {
|
|
||||||
// If all fonts are available now, then call all the callbacks.
|
|
||||||
if (this.fontsWaiting == 0) {
|
|
||||||
var callbacks = this.fontsWaitingCallbacks;
|
|
||||||
for (var i = 0; i < callbacks.length; i++) {
|
|
||||||
callbacks[i]();
|
|
||||||
}
|
|
||||||
this.fontsWaitingCallbacks.length = 0;
|
|
||||||
}
|
|
||||||
}.bind(this), 100);
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -98,6 +87,8 @@ FontWorker.prototype = {
|
|||||||
// Store only the data on Fonts that is needed later on, such that we
|
// Store only the data on Fonts that is needed later on, such that we
|
||||||
// hold track on as lease memory as possible.
|
// hold track on as lease memory as possible.
|
||||||
Fonts[font.name] = {
|
Fonts[font.name] = {
|
||||||
|
name: font.name,
|
||||||
|
mimetype: font.mimetype,
|
||||||
// This is set later on the worker replay. For some fonts, the encoding
|
// This is set later on the worker replay. For some fonts, the encoding
|
||||||
// is calculated during the conversion process happening on the worker
|
// is calculated during the conversion process happening on the worker
|
||||||
// and therefore is not available right now.
|
// and therefore is not available right now.
|
||||||
|
Loading…
x
Reference in New Issue
Block a user