Question

我在画布区域中使用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不会将您的文件解释为“字体”。通常，文件扩展名应该足以确定预加载类型，但是看起来它只是试图将其加载为纯文本格式。您可以使用type属性解决此问题：

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

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

第二，CSS中的“字体家族”是从FontLoader中从字体名称派生的。不幸的是，您的字体中带有破折号，该破折号被去除了。 “数字7”变为“数字7”。如果您使用“ digital7”，它将正常工作。

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

此文档没有很好的记录，因此我将确保对其进行更新。

希望有帮助！

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

1 个答案: