一、任务目标
在实际开发中引擎自带的字体有时难以满足我们的需求，所以我们要替换成其他的字体文件，其中ttf字体作为一种资源，如何加载并使用呢？本次任务将学习这部分内容，同时该方法可以类比到其他资源的加载中。
二、任务分解
2.1 引擎IDE中查看示例效果
- 首先还是将我们需要用到的
ttf字体文件放到Assets文件目录下，可以新建子目录也可以直接放到根目录
- 在IDE中托一个Text文本框，设置对应内容，然后将
font属性设置为你添加的ttf字体文件名 - 这里需要注意的是非IDE自带字体下拉菜单是找不到的，需要自己手动输入
- 另外如果效果和引入的
ttf字体效果有差异，或者没有效果，可以刷新编辑器，这是LayaAir的一个坑 - 运行结果如下：
可以发现效果和IDE中的不同，这是为什么呢？其实是我们没有加载字体文件，ttf在使用时需要像位图字体一样，在代码中加载资源，否则没有效果
2.2 在代码中加载资源
export default class ttfFont extends Laya.Script {
/** @prop {name:text,tips:"text实体",type:Node,default=null} */
text: Laya.Text;
constructor() { super(); }
onAwake() {
/**
* 1.Laya.LoaderManger类是单例，所以不用实例化，直接使用Laya.loader访问
* 2.利用LoadManger类的load方法加载资源，成功后回调函数的参数为对应加载完成的资源
*/
Laya.loader.load("ttfFont/BalooBhaina-Regular.ttf",Laya.Handler.create(this,(res: Laya.TTFLoader)=>{
console.log(res);
this.text.font = res.fontName;
}),null,Laya.Loader.TTF,0,true);
}
}
-
关于资源加载类的相关内容，可以详见之后的文档以及代码注释
-
资源的URL是从bin目录下开始的，编译后会出现相关资源，如果没有可以先编译一下项目然后重启vscode
-
如果不知道返回的资源类型，可以先
console.log()一下，查看资源类型以及我们要用的资源属性等
-
现在查看结果：
效果正确！
2.3 参考资料
- loaderManger类API：https://layaair2.ldc2.layabox.com/api2/Chinese/index.html?version=2.12.1beta&type=Core&category=Net&class=laya_net_loadermanager.loadermanager
- loader类API：https://layaair2.ldc2.layabox.com/api2/Chinese/index.html?version=2.12.1beta&type=Core&category=Net&class=laya.net.Loader
- 关于回调函数的一篇易理解博文：https://www.zhihu.com/question/19801131/answer/1641403537