ActionScript
TypeScript
JavaScript

TTF字体的使用

发布时间:2017-03-14

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字体的链接。


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

module laya {
	import Text = Laya.Text;
	export class Text_ComplexStyle {

		constructor() {
			Laya.init(400,600);
			this.createText()
		}

		private createText(): void {
        		var txt = new Text();
        		//给文本的text属性赋值
                    txt .fontSize=40;
        
                    txt .color="#FF00FF";
        
                    txt .text="嘻嘻嘻嘻嘻";
        
                    txt .font="yuwei";
        
                    Laya.stage.addChild(txt );
		}
	}
}
new laya.Text_ComplexStyle();

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);

        }

    }

}


module laya {
	import Text = Laya.Text;
	export class Text_ComplexStyle {

		constructor() {
			Laya.init(400,600);
			 Laya.stage.bgColor = "#ffffff";
			this.createText()
		}

		private createText(): void {
        		var 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 txt= new Text();
        
                    txt.fontSize=40;
        
                    txt.color="#FF00FF";
        
                    txt.text="嘻嘻嘻嘻嘻";
        
                    txt.font = "yuwei";
                               txt.text += "哈哈哈哈";
                    Laya.stage.addChild(txt);
        
                }
	}
}
new laya.Text_ComplexStyle();


image.png

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

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