canvas 中用于字体预加载的 preloadjs

Question

我在 canvas 区域使用 preloadjs 加载字体（字体是我计算机的本地字体），但字体仅在页面刷新后显示。文字为my_text，字体为"digital-7.ttf"，代码如下：

var stage = new createjs.Stage("canvas");

var queue=new createjs.LoadQueue();
var counter=0;

queue.on("complete",handleComplete);
queue.on("fileload", handleFileLoad);
queue.loadManifest([
        {id:"f1",src:"css/digital-7.ttf"}
                ]);

function handleFileLoad(event){
   counter+=1
   console.log("asset "+ counter+" loaded");
}
function handleComplete(event){
    console.log(counter);

    var my_text=new createjs.Text("hi there!","20px digital-7","black");
    my_text.x=465;
    my_text.y=100;
    stage.addChild(my_text);
    stage.update();
}

//stage.update();

这当然很让人恼火。为什么页面刷新后才显示字体？有什么想法吗？

Answer 1

有两个问题，都不是你的错：

首先，PreloadJS 不会将您的文件解释为 "font"。通常，文件扩展名应该足以确定预加载类型，但看起来它只是试图将其作为纯文本加载。您可以使用类型属性解决此问题：

queue.loadManifest([
    {id:"f1", src:"digital-7.ttf", type:"font"}
]);

请注意，由于来源只能确定基于单一 url 的字体，因此在 PreloadJS 中解决此问题只会捕获这一种用法。

其次，CSS中的"font family"是从字体名称在FontLoader中导出的。不幸的是，您的字体中有一个破折号，它被删除了。 "Digital-7" 变为 "digital7"。如果你使用"digital7"，它会正常工作。

var my_text=new createjs.Text("hi there!", "50px 'digital7'", "black");

这没有很好的记录，所以我会确保它得到更新。

希望对您有所帮助！

canvas 中用于字体预加载的 preloadjs

preloadjs for font preloading in canvas

fonts

preloadjs