用于在画布中预加载字体的preloadjs

Question

我使用preloadjs在画布区域中加载字体(字体在我的计算机上是本地的)，但只有在页面刷新后才会显示字体。文本为数字格式，字体为以下代码中的“my_text -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没有将你的文件解释为“字体”。通常，文件扩展名应该足以确定预加载类型，但它看起来只是试图将其加载为纯文本。你可以通过type属性来解决这个问题：

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

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

其次，CSS中的“字体系列”是在FontLoader中从字体名称派生而来的。不幸的是，你的字体中有一个破折号，它被去掉了。"Digital-7“变成了"digital7”。如果你使用"digital7"，它会正常工作。

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

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

希望这能有所帮助！