egret引入外部字体

浦德明

2023-12-01

由于默认的字体类型都不满足我们的ui设计要求，我们经常需要引入一些外部的字体，这里记录一下egret如何引入外部字体，之前百度和谷歌下来，方式都是一样的，就是在index.html中引入字体样式，然后在需要的地方通过设置fontFamily属性来使用字体，而且有且仅有这样方式，但是这种方式偏偏我怎么试都不行，卡了多日终于解决，这里进行一个详细记录：

index.html文件引入字体。网上其实都这么说，但是egret项目中是有两个index.html文件的，网上部分人说是template/web/index.html这个文件，我亲测下来不是template/web/index.html，就是根目录下的index.html,修改方法如下：

    <style>
        @font-face{
            font-family: "coreFont";
            /* 如果要引用远程文件，就这么引用 */
            src:url("https://img.kingsc.top/fish-game/font/ZCOOLKuaiLe-Regular.ttf");
            /* 如果要引用本地文件就这么引用 */
            /*src:url("resource/font/ZCOOLKuaiLe-Regular.ttf");*/
        }
        /* 下面这一部分是原本就有的内容，只有上面的才是需要加的 */
        html, body {
            -ms-touch-action: none;
            background: #888888;
            padding: 0;
            border: 0;
            margin: 0;
            height: 100%;
        }  
    </style>

继续在上面的这个html文件中增加一次引用,如果不进行一次引用的话，会导致我们在程序里真正进行使用时会出现首次使用的字体不生效的情况，网上有很多说通过"document.fonts.ready.then"这种方式解决，但是我试下来不行。这里的引用采用的是绝对布局，并且位置不在我们的画布上，从而让本次引用不会显示出来（避免影响我们的界面效果），具体如下：

<body>
    <!-- 就下面这一行，其他的代码都是原本就有的 -->
    <p style="font-family: coreFont;position: absolute;top: -9999px;left: -9999px;">首次试用一下特殊字体</p>
    <div style="margin: auto;width: 100%;height: 100%;" class="egret-player"
        data-entry-class="app.Main"
        data-orientation="auto"
        data-scale-mode="fixedWidth"
        data-frame-rate="30"
        data-content-width="640"
        data-content-height="1136"
        data-multi-fingered="2"
        data-show-fps="false" data-show-log="false"
        data-show-fps-style="x:0,y:0,size:12,textColor:0xffffff,bgAlpha:0.9">
    </div>

在我们需要使用的地方进行使用:

    let loadingLabel = new eui.Label();
    loadingLabel.fontFamily = "coreFont";
    loadingLabel.text = " Loading...";
    this.addChild(loadingLabel);

egret引入外部字体

相关阅读

相关文章

相关问答

相关文档