0

我在画布区域中使用 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();

这当然是非常恼人的。为什么页面刷新后才显示字体？有什么想法吗？

4

1 回答 1

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");

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

希望有帮助！

于 2018-08-27T14:47:59.243 回答