Fonts Preload用于在画布中预加载字体

我使用PreloJS在画布区域中加载字体（字体是我计算机的本地字体），但字体仅在页面刷新后显示。 文本为my_文本，字体为以下代码中的“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();

---

这当然非常令人恼火。为什么只有在页面刷新后才会显示字体？有什么想法吗

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

首先，PreloJS不是将文件解释为“字体”。通常情况下，文件扩展名应该足以确定预加载类型，但看起来它只是试图将其作为纯文本加载。您可以使用类型属性来解决此问题：

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

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

其次，CSS中的“字体系列”是从字体名称在FontLoader中派生出来的。不幸的是，您的字体中有一个破折号，它被去掉了。“数字7”变为“数字7”。如果您使用“digital7”，它将正常工作

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

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

希望有帮助