ActionScript
TypeScript
JavaScript

TTF字体的使用

发布时间:2017-02-21

TTF(TrueTypeFont)是Apple公司和Microsoft公司共同推出的字体文件格式,随着windows的流行,已经变成最常用的一种字体文件表示方式。

在使用TTF字体之前,我们先去网站上下载一个别人创建好的TTF字体,TTF字体的版权归原作者所有,我们本次使用仅用作学习和交流,如果要用于商业用途请联系原作者获得许可。

将已经下载好的TTF文件放在与html文件同一个目录下

image.png

在html标签下以CSS格式嵌入TTF字体

image.png

@ font-face的是一个CSS规则,允许你输入自己的字体出现在网站上,即使在特定的字体在访问者的计算机上没有安装。这条规则最重要的是,它为设计师打开了一个全新的世界。您可以使用任何你喜欢的字体。

font-family 是我们给这个外部引用的TTF字体定义的名字,在设置字体样式的时候直接设置自定义的TTF字体的名字。

src 我们外部TTF字体的链接。


在我们的测试项目中设置我们字体的样式。

package 
{
 import laya.display.Text;
 public class ttfTest 
 {
  
  public function ttfTest() 
  {
   Laya.init(550, 400);
    var text:Text=new Text();

            text.fontSize=40;

            text.color="#FF00FF";

            text.text="嘻嘻嘻嘻嘻";

            text.font="yuwei";

            Laya.stage.addChild(text);
  }
  
 }

}

image.png

这里我们在canvas模式下已经成功引用外部TTF字体。


以上方法在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(1136, 640,WebGL);  
   Laya.stage.bgColor = "#ffffff";

            var text:Text=new Text();

            text.fontSize=40;

            text.color="#FF00FF";

            text.text="哈哈哈哈哈哈哈哈哈哈哈哈哈哈";

            text.font="yuwei"

            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 = "yuwei";
   text.text += "哈哈哈哈";
            Laya.stage.addChild(text);

        }

    }

}


image.png

首次用到的(哈)字将会报废,下次再用到同样字的时候 无ttf样式效果,请谨慎选择生僻字做为首次加载字体的text文本,将该字体显示到可视区域外即可。

字体渲染一件棘手的事情,使用越多的TTF字体将会减慢浏览器加载TTF字体的速度。