LayaAir下TTF字体的使用方式?

已邀请:

cuixueying

赞同来自: yung Ismeluo

步骤一:将已经下载好的ttf文件放置在h5目录下

ccc.png


步骤二:在html标签下以CSS格式嵌入TTF字体

bbb.png


font-family为字体名称
在项目中设置字体的font

aaa.png


编译后效果如下:

zzz.png

 

问题补充:
  以上方法在canvas模式下正常,webGL模式下无效,这个是因为在用到该字体样式的时候,ttf字体包还未加载完成。html下字体是否加载完成,没有办法抛出事件,laya也无法监听判断。

替代方案:
   在字体正式使用前,提前加载一个字体,该字体的主要功能是用于提前启动被加载字体的加载,保证在项目中正式使用该字体样式的时候,字体包已经加载完成
示例参考代码如下

参考代码如下:
package
{
import laya.display.Sprite;
import laya.display.Text;
import laya.ui.Image;
import laya.webgl.WebGL;

public class TTFTest
{
public function TTFTest()
{
Laya.init(550,400);

var sp:Image=new Image();
sp.loadImage("2.png");
Laya.stage.addChild(sp);

var text:Text=new Text();
text.fontSize=40;
text.color="#FF00FF";
text.text="哈哈哈哈哈哈哈哈哈哈哈哈哈哈";
text.font="hu"
text.pos(600,600);
Laya.stage.addChild(text);

Laya.timer.once(1000,this,onLoop);
}

private function onLoop():void
{
var text:Text=new Text();
text.fontSize=40;
text.color="#FF00FF";
text.text="嘻嘻嘻嘻嘻";
text.font="hu"
Laya.stage.addChild(text);
}
}
}
 
注意:
 首次用到的(哈)字将会报废,下次再用到同样字的时候 无ttf样式效果,请谨慎选择生僻字做为首次加载字体的text文本,将该字体显示到可视区域外即可。

LayaNative(app)端使用ttf请参考:LayaNative端使用.ttf字体
 

unnamedzc

赞同来自:

很好,很强大,收藏了

bluesea

赞同来自:

嗯 ,不错。

daohu

赞同来自:

很好用!感觉webGL模式下是首次使用ttf的时候才开始加载,所以建议在预加载其他图集资源的时候就创建一次ttf文字(当然得找生僻字当炮灰),这样等到其他资源加载完也顺利加载好ttf了,不然延迟1s后如果还没加载完是会悲剧的

jacksing888

赞同来自:

不是用TS 而是用js的 也可以用同样的方法吗?没有一个创建字体的方法吗?如果我是直接把laya库直接引入在html引用进来直接开发的,而不是通过laraya编译的 是不是就不能用了

cuixuxucui

赞同来自:

在firefox和在chrome里文字位置不一样,firefox会偏上

要回复问题请先登录注册