Egret社区
本题已加入常见问题汇总 » 多媒体 & 资源最佳实践,更多多媒体 & 资源最佳实践相关的话题欢迎关注讨论

今天脑洞一下,用H5调用外部字体的方法是否可以使用在白鹭上。测试了一下发现可以使用,在这分享一下方法:首先,在样式表中定义外部使用的字体:
@font-face {
            font-family:"hanti";
            src: url("linxintijian.ttf");
            }

然后在字体标签的fontfamily属性中使用这个字体就行了,以sample为例:
        let colorLabel = new egret.TextField();
        colorLabel.textColor = 0xffffff;
        colorLabel.width = stageW - 172;
        colorLabel.textAlign = "center";
        colorLabel.text = "Hello Egret";
        colorLabel.size = 24;
        colorLabel.x = 172;
        colorLabel.y = 80;
        colorLabel.fontFamily ="hanti";
        this.addChild(colorLabel);

在浏览器中测试:
QQ20161226-171811.png
在手机上测试(安卓微信浏览器):
WechatIMG100.jpeg
ios设备没经过测试,已知ttc类型字体不支持

由于字体加载比白鹭加载慢,导致字体没应用上,加个字体监听:
    <script>
        document.fonts.ready.then(success, fail);
        function success(){
            egret.runEgret({renderMode:"webgl", audioType:0});
        }
        function fail(){
        }
    </script>

当然可以用更好的方法让字体和白鹭的资源同时读取,再加个加载界面就完美了……

分享到 :
4 人收藏
H5游戏,微信定制开发。http://www.hiiman.com/

20 个回复

倒序浏览
yjtx  官方团队 | 2016-12-26 17:34:02
你可以测试下如果字体加载完成在游戏开始后还行不行
nofastfat  圆转纯熟 | 2016-12-26 17:41:44
h5的ttf字体对白鹭适用,但是有太多隐患,比如中文ttf大小,加载先后等问题。建议还是fnt
volsifly  圆转纯熟 | 2016-12-26 20:06:36
yjtx 发表于 2016-12-26 17:34
你可以测试下如果字体加载完成在游戏开始后还行不行

好像是不行……看看怎么把字体加载加个监听……
volsifly  圆转纯熟 | 2016-12-26 20:07:40
nofastfat 发表于 2016-12-26 17:41
h5的ttf字体对白鹭适用,但是有太多隐患,比如中文ttf大小,加载先后等问题。建议还是fnt ...

fnt只适用固定文字内容的地方,如果是用户发表或者其他不确定的文字来源,那就没法用了
yjtx  官方团队 | 2016-12-28 10:33:53
volsifly 发表于 2016-12-26 20:06
好像是不行……看看怎么把字体加载加个监听……

就是因为系统底层没有派发这个没监听,所以才没支持。
sxtaosdo  自成一派 | 2016-12-28 10:41:02
厉害
volsifly  圆转纯熟 | 2016-12-28 10:41:18
yjtx 发表于 2016-12-28 10:33
就是因为系统底层没有派发这个没监听,所以才没支持。

我后来编辑了一下,加了字体读取的监听
volsifly  圆转纯熟 | 2016-12-28 10:41:23
yjtx 发表于 2016-12-28 10:33
就是因为系统底层没有派发这个没监听,所以才没支持。

我后来编辑了一下,加了字体读取的监听
a123005  登堂入室 | 2017-1-12 13:08:46
yjtx 发表于 2016-12-28 10:33
就是因为系统底层没有派发这个没监听,所以才没支持。

在字体正式使用前,提前加载一个字体,该字体的主要功能是用于提前启动被加载字体的加载,保证在项目中正式使用该字体样式的时候,字体包已经加载完成
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号 )

Powered by Discuz! X3.4 © 2001-2019 Comsenz Inc.

返回顶部