html5使用新字体,html5 – 使用带有canvas fillText的font-face字体

编辑：嗯,看起来字体是在DOM上的一个元素使用后加载的,所以我只是使用了一个隐藏的Div和一个使用font-face字体的文本,它现在正在工作…… 🙂

我正在使用此代码通过大量更新来更新favicon,但我想使用自定义像素字体来编写数字.

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';

使用’普通12px Arial’可以正常工作.如果我使用自定义“访客”字体,它只是更改图标,但我看不到该数字.

什么可能是问题的任何想法？