编辑:好吧,看起来字体只有在DOM中的元素使用时才会加载,所以我只是使用了一个隐藏的带有使用font-face字体的文本的Div,现在它正在工作...
我正在使用这段代码更新favicon的更新数量,但我想用自定义像素字体来写数字。
这是我的Javascript代码:
var canvas = document.createElement('canvas'),
ctx,
img = document.createElement('img'),
link = document.getElementById('favicon').cloneNode(true),
updates = data;
if (canvas.getContext) {
canvas.height = canvas.width = 16; // set the size
ctx = canvas.getContext('2d');
img.onload = function () { // once the image has loaded
ctx.drawImage(this, 0, 0);
ctx.font = 'normal 12px Visitor';
ctx.fillStyle = '#213B55';
ctx.textBaseline="middle";
ctx.textAlign="center";
ctx.fillText(updates, 10, 10);
link.href = canvas.toDataURL('image/png');
document.body.appendChild(link);
};
img.src = 'favicon_new.png';
}
这是我的CSS中的内容
@font-face {
font-family: 'Visitor';
font -style: normal;
font-weight: normal;
src: url('fonts/visitor.woff') format('woff');
如果我改变这一行:
ctx.font = 'normal 12px Visitor';
'normal 12px Arial' 可以正常工作。如果我使用自定义的 "Visitor" 字体,它只会更改网站图标,但是我看不到数字。你有什么想法,可能出了什么问题吗?