跳到主要内容

使用 ttf 字体文件

引擎 5.3.5 版本开始支持 ttf 字体文件。

示例 Demo 下载

在资源配置文件中引入 ttf​

在 default.res.json 中增加 ttf 的配置。注意：ttf 文件的 “type” 类型是 ttf 而不是 bin。

{
  "groups":[{
  "keys":"egret_icon_png,myFont_ttf",
  "name":"preload"
  }],
  "resources":[
  {
  "name":"egret_icon_png",
  "type":"image",
  "url":"assets/egret_icon.png"
  },
  {
  "name":"myFont_ttf",
  "type":"ttf",
  "url":"assets/myFont.ttf"
  },
  ]
}

在代码中映射字体​

在示例 demo 的 75 行，通过如下代码映射字体。需要注意，映射前字体必须已经通过RES加载完成。

egret.registerFontMapping("myFont",  "resource/assets/myFont.ttf");

使用 ttf 字体​

在示例 demo 的 139 行，通过如下代码使用 ttf 字体

let textfield =  new  egret.TextField();
textfield.fontFamily  =  "myFont";  //上一步映射的字体
this.addChild(textfield);
textfield.alpha  =  0;
textfield.width  = stageW -  172;
textfield.textAlign  = egret.HorizontalAlign.CENTER;
textfield.size  =  24;
textfield.textColor  =  0xffffff;
textfield.x  =  172;
textfield.y  =  135;
this.textfield  = textfield;

运行显示效果​

![](./使用 ttf 字体文件_files/p1.png)