EUI Editor中如何增加eui.Lable等其他输入文本标签的字体选项

最新推荐文章于 2024-07-22 20:24:18 发布

原创最新推荐文章于 2024-07-22 20:24:18 发布 · 892 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #ui #javascript #游戏引擎

本文档详细介绍了在EUI项目中遇到字体不符需求的问题，以及如何解决。通过在EUI的wingProperties.json、index.html及fonts文件夹中进行配置，实现了引入自定义字体。首先创建fonts文件夹并放入.ttf文件，然后在index.html中编写逻辑代码加载字体，最后在wingProperties.json中加入引用。完成配置后重启EUI即可看到新增字体。同时，解决原有系统字体丢失的问题，只需在wingProperties.json中添加系统字体名称。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

昨天跟项目的UI跟进一下项目，然后在EUI中发现游戏中有皮肤（.exml）的字体不符合UI设计的要求，但是EUI中又没有UI要求的那种字体，那么我们提出了两种解决方法，一种是在前端中引用字体.ttf文件然后给前端处理，第二种是在EUI中增加要求的字体。而我作为一个小白是啥也不会，最后求助了群里的大佬，大佬教会了我如何在EUI中增加字体，那么我在这里仔细的分享给大家。
第一步我们要明确几个文件以及文件夹，1.创建的项目中的wingProperties.json文件 2.EUI所在目录下\Egret UI Editor\resources\app\euiruntime的index.html文件以及fonts文件夹（这里要自己创建这个文件夹）
第二部我们要明白这几个文件里应该干嘛，1.fonts文件夹中放入我们要用的.ttf文件 2.index.html中要编写我们用的逻辑代码（我会在附件中上传大佬写的index.html） 3.wingProperties.json要加入引用代码。
下面我放出截图，可能顺序有点乱，大家可以自己慢慢理解:
在这里插入图片描述

最后在完成配置后重启EUI 就可以看见自己增加的字体了。
还有一个问题，就是在我们增加新字体后，会发现自己原来有的字体，比如什么正楷、微软雅黑都没有了。其实这是系统自带的字体，我们只需要在wingProperties.json的fonts中输入原来那些系统自带字体的名字（有中文的也不影响）就可以了。
这篇帖子希望能给大家带来帮助，不用于商用，希望大家喜欢。

Egret

<div style="margin: auto;width: 100%;height: 100%;" id="runtimePlayer" class="egret-player" data-entry-class="RuntimeRootContainer" data-orientation="auto"
    data-scale-mode="noScale" data-resolution-mode="retina" data-frame-rate="60" data-content-width="480" data-content-height="800"
    data-show-paint-rect="false" data-multi-fingered="2" data-show-fps="false" data-show-log="false" data-log-filter="" data-show-fps-style="x:0,y:0,size:30">
</div>
<script>
	window["AudioContext"] = null;
	window["webkitAudioContext"] = null;
	window["mozAudioContext"] = null;


    
    async function loadFonts(id,url){
        let font = new FontFace(id, "url('" + url + "')")
        window.parent.document.fonts.add(font)
        //_createDiv(id)
        font.load()
        await font.loaded
    }
    function addScripts(scripts,callBack){
        var src = scripts.shift();
        if(src){
            var head= document.getElementsByTagName('head')[0];
            var script= document.createElement('script');
            script.type= 'text/javascript';
            script.onload = function() {
                script.onload = null;
                addScripts(scripts,callBack);
            };
            script.onerror = function(e){
                console.log(e);
            }
            script.src= src;
            head.appendChild(script);
        }else{
            callBack();
        }
    }
    var scripts = [
        egretLibPath,
        egretWebLibPath,
        uiLibPath,
        tweenPath,
        'libs/modules/res/res.js',
        'libs/api.js',
        // 'yunegret.js',
        'AssetAdapter.js',
        'Theme.js',
        'Main.js'
	];

    function checkFont(){
    let values=document.fonts.values();
    let item=values.next();
    while(!item.done)
    {
        let fontFace=item.value;
        console.log("fonts",fontFace.family)
        item=values.next();
    }
}
    async function test(){
        await loadFonts("HYWenHei-85W",'./fonts/HYWenHei-85W.ttf');
        await loadFonts("ygy",'./fonts/ygy.ttf');
        addScripts(scripts,function(){
        var base = document.createElement("base");
        base.href=decodeURIComponent(projectRoot)+"/";
		document.head.appendChild(base);
		egret.runEgret({ calculateCanvasScaleFactor:function(context) {return 1;}});
		window.parent.postMessage('egret_loaded:'+runtimeId,'*');
    });
    }

    test();

</script>