Laya 如何使用自定义字体?
自定义字体有3种方式字库ttf 位图字体fnt 和FontClip如何选择字体PC端微软雅黑Android:默认英文和数字是Droid Sans,默认中文是DroidsansfallbackIos默认数字是HelveticaNeue其他系统均不支持 微软雅黑默认中文字体和微软雅黑差异不大。1.下载一个免费商用的字体。iconfont:阿里巴巴矢量字体库官网地址 百度网盘阿里数黑体2.查看字体显示效果选择一种字体比如AlimamaShuHeiTi-Bold.ttf导入位置C:\Windows\Fonts用Photoshop打开看看。3.Laya加载字体后字体名和文件名一致微信小游戏字体名取的是真实的字体名。4.选择字库的名字中间不能有空格否则手机端会显示不正常。如果有空格使用fontcreater工具修改保存字体如何在Laya编辑器下拉列表出现自己定义的字体1.修改Laya编辑器配置文件laya.editorUI.xml增加刚才导入的字体名字:位置C:\Program Files\LayaAirIDE2.13.0\resources\app\out\vs\layaEditor\renders2.打开laya编辑器可在Label组件的font下拉列表看见刚才新增的字体。1.字库字体优点支持矢量字库放大缩小文字不模糊。缺点可能文件较大代码使用let ttfloader:Laya.TTFLoadernew Laya.TTFLoader()ttfloader.fontNamefontName;ttfloader.load(font/fontName.ttf);ttfloader.completeLaya.Handler.create(this,(){let txt:Laya.Textnew Laya.Text();txt.text自定义字体;txt.fontfontName;txt.fontSize20;Laya.stage.addChild(txt);})2.位图字体优点完全就是显示图片对色彩和字体效果表现很不错适合较小范围的字体使用。缺点主要是通过将字体做成图集来提取文字显示不能在程序中设置字体颜色。放大超过设定大小会模糊。在游戏中不能即时按字体大小显示。位图字体需要手动制作制作软件 下载地址1.设置使用的字体编码设置 要和txt文件一致字体大小会影响导出的文字的显示大小选中字体后就会显示该字体所有的字体。2.创建txt文件新建一个文本将想要使用的文字存起来另存为 unicode码如果编码不存在保留成UTF-16LE也可以。3.导入txt导入txt后高亮的就是自己需要导出的文字。右侧会以绿色复选框展示。4.导出设置5.导出位图字体导出文件 test.fnt 和 test_0.png要在laya使用需要将图片改为test.png,然后在Laya编辑器font输入test即可。Laya如何使用//加载字体let bitmapFont:Laya.BitmapFontnew Laya.BitmapFont();bitmapFont.loadFont(bitmapFont/test.fnt,Laya.Handler.create(this,(){console.log(加载完成,bitmapFont);Laya.Text.registerBitmapFont(test,bitmapFont);//设置字体let lab:Laya.Labelnew Laya.Label();lab.fonttest;}));//注意Laya 支持单张位图图片需将 test_0.png改为test.png。若导出多张图集需要自己处理loadFont(path,complete){this._pathpath;this._completecomplete;if(!path||path.indexOf(.fnt)-1){console.error(Bitmap font configuration information must be a.fntfile);return;}ILaya.loader.load([{url:path,type:ILaya.Loader.XML},{url:path.replace(.fnt,.png),type:ILaya.Loader.IMAGE}],Handler.create(this,this._onLoaded));}问题1.设置字体大小无效需设置BitmapFont.autoScaleSize true2.貌似无法设置字体颜色源码如下if(tCurrBitmapFont){var tWidththis.width;if(tCurrBitmapFont.autoScaleSize){tWidththis.width*bitmapScale;x*bitmapScale;y*bitmapScale;}//位图字体 并未带颜色tCurrBitmapFont._drawText(word,this,x,y,this.align,tWidth);}else{this._words||(this._words[]);if(this._words.length(i-beginLine)){_wordthis._words[i-beginLine];}else{_wordnewWordText();this._words.push(_word);}_word.setText(word);_word.splitRenderthis._singleCharRender;style.stroke?graphics.fillBorderText(_word,x,y,ctxFont,this.color,textAlgin,style.stroke,style.strokeColor):graphics.fillText(_word,x,y,ctxFont,this.color,textAlgin);}3.FontClip字体切片字体切片和位图字体原理都差不多都有一张 文字图集。位图字体靠fnt文件和文字图集相关联而文字切片使用sheet来确定和文字图集的一一对应关系。文字图集的换行需要sheet加个空格。优点使用简单不需要写额外加载代码平台限制小缺点设置宽高无效只能设置缩放。需要手动设置sheet。比较适合小范围字体比如技能伤害 飘字属性名字等特殊字体。微信小游戏如何使用/** 微信小游戏 对自定义字体支持不好 */publicloadFont(callBack:Function){constfsthis.wx.getFileSystemManager();fs.getFileInfo({filePath:${this.wx.env.USER_DATA_PATH}/Baloo Bhaina.ttf,success:(res){console.log(使用缓存字体);this.readFont(callBack);},fail:(res){//使用downloadFile,可使用服务器远程字体console.log(加载字体);this.wx.downloadFile({url:Define.cdnres/font/Baloo Bhaina.ttf,success:(res){if(res.statusCode200){console.log(font tempFilePath,res.tempFilePath);constfsthis.wx.getFileSystemManager()fs.copyFile({srcPath:res.tempFilePath,destPath:${this.wx.env.USER_DATA_PATH}/Baloo Bhaina.ttf,success:(res){console.log(复制字体成功,res);this.readFont(callBack);},fail:(res){console.error(复制字体失败,res);}})}}})}});}readFont(callBack:Function){//直接使用loadFont,只能使用微信本地目录文件var fontthis.wx.loadFont(${this.wx.env.USER_DATA_PATH}/Baloo Bhaina.ttf);console.log(font font);Laya.Text.defaultFontfont;callBackcallBack();}