Do not add the font-loader canvas to the page dom to save some load time
This commit is contained in:
parent
26389c083a
commit
c1c8ca4ef3
58
fonts.js
58
fonts.js
@ -104,6 +104,7 @@ var FontsLoader = {
|
||||
|
||||
worker ? obj.bindWorker(str) : obj.bindDOM(str);
|
||||
}
|
||||
|
||||
return ready;
|
||||
}
|
||||
};
|
||||
@ -766,96 +767,55 @@ var Font = (function () {
|
||||
return fontData;
|
||||
},
|
||||
|
||||
bindWorker: function font_bind_worker(dataStr) {
|
||||
bindWorker: function font_bindWorker(data) {
|
||||
postMessage({
|
||||
action: "font",
|
||||
data: {
|
||||
raw: dataStr,
|
||||
raw: data,
|
||||
fontName: this.name,
|
||||
mimetype: this.mimetype
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
bindDOM: function font_bind_dom(dataStr) {
|
||||
bindDOM: function font_bindDom(data) {
|
||||
var fontName = this.name;
|
||||
|
||||
/** Hack begin */
|
||||
// Actually there is not event when a font has finished downloading so
|
||||
// the following code are a dirty hack to 'guess' when a font is ready
|
||||
// This code could go away when bug 471915 has landed
|
||||
var canvas = document.createElement("canvas");
|
||||
var style = "border: 1px solid black; position:absolute; top: " +
|
||||
(debug ? (100 * fontCount) : "-200") + "px; left: 2px; width: 340px; height: 100px";
|
||||
canvas.setAttribute("style", style);
|
||||
canvas.setAttribute("width", 340);
|
||||
canvas.setAttribute("heigth", 100);
|
||||
document.body.appendChild(canvas);
|
||||
|
||||
// Get the font size canvas think it will be for 'spaces'
|
||||
var ctx = canvas.getContext("2d");
|
||||
ctx.font = "bold italic 20px " + fontName + ", Symbol, Arial";
|
||||
ctx.font = "bold italic 20px " + fontName + ", Symbol";
|
||||
var testString = " ";
|
||||
|
||||
// When debugging use the characters provided by the charsets to visually
|
||||
// see what's happening instead of 'spaces'
|
||||
var debug = false;
|
||||
if (debug) {
|
||||
var name = document.createElement("font");
|
||||
name.setAttribute("style", "position: absolute; left: 20px; top: " +
|
||||
(100 * fontCount + 60) + "px");
|
||||
name.innerHTML = fontName;
|
||||
document.body.appendChild(name);
|
||||
|
||||
// Retrieve font charset
|
||||
var charset = Fonts[fontName].properties.charset || [];
|
||||
|
||||
// if the charset is too small make it repeat a few times
|
||||
var count = 30;
|
||||
while (count-- && charset.length <= 30)
|
||||
charset = charset.concat(charset.slice());
|
||||
|
||||
for (var i = 0; i < charset.length; i++) {
|
||||
var unicode = GlyphsUnicode[charset[i]];
|
||||
if (!unicode)
|
||||
continue;
|
||||
testString += String.fromCharCode(unicode);
|
||||
}
|
||||
|
||||
ctx.fillText(testString, 20, 20);
|
||||
}
|
||||
|
||||
// Periodicaly check for the width of the testString, it will be
|
||||
// different once the real font has loaded
|
||||
var textWidth = ctx.measureText(testString).width;
|
||||
|
||||
var interval = window.setInterval(function canvasInterval(self) {
|
||||
this.start = this.start || Date.now();
|
||||
ctx.font = "bold italic 20px " + fontName + ", Symbol, Arial";
|
||||
ctx.font = "bold italic 20px " + fontName + ", Symbol";
|
||||
|
||||
// For some reasons the font has not loaded, so mark it loaded for the
|
||||
// page to proceed but cry
|
||||
if ((Date.now() - this.start) >= kMaxWaitForFontFace) {
|
||||
window.clearInterval(interval);
|
||||
Fonts[fontName].loading = false;
|
||||
warn("Is " + fontName + " for charset: " + charset + " loaded?");
|
||||
warn("Is " + fontName + " loaded?");
|
||||
this.start = 0;
|
||||
} else if (textWidth != ctx.measureText(testString).width) {
|
||||
window.clearInterval(interval);
|
||||
Fonts[fontName].loading = false;
|
||||
this.start = 0;
|
||||
}
|
||||
|
||||
if (debug)
|
||||
ctx.fillText(testString, 20, 50);
|
||||
}, 30, this);
|
||||
|
||||
/** Hack end */
|
||||
|
||||
// Convert the data string and add it to the page.
|
||||
var base64 = window.btoa(dataStr);
|
||||
|
||||
// Add the @font-face rule to the document
|
||||
var url = "url(data:" + this.mimetype + ";base64," + base64 + ");";
|
||||
var url = "url(data:" + this.mimetype + ";base64," + window.btoa(data) + ");";
|
||||
var rule = "@font-face { font-family:'" + fontName + "';src:" + url + "}";
|
||||
var styleSheet = document.styleSheets[0];
|
||||
styleSheet.insertRule(rule, styleSheet.length);
|
||||
|
Loading…
x
Reference in New Issue
Block a user