【报Bug】微信小程序真机canvas 字体不生效，微信开发工具正常

<template>  
    <view class="page-body">  
        <view class="uni-padding-wrap uni-common-mt">  
            <view class="font_tt">  
                示例文字：孢子体可  
            </view>  
            <view class="writing-input">  
                <input type="text" v-model="writingData.writing" placeholder-class="writing-pl" :placeholder="placeholder">  
            </view>  
            <canvas :canvas-id="canvas_rid" :hidpi="true" :id="canvas_rid"   :width="canvasWidth"  
                :height="canvasHeight"></canvas>  

            <button @click="CreateWriting">确认</button>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                placeholder: "文字定制",  
                canvasWidth: 300,  
                canvasHeight: 300,  
                canvas_rid: 'canvas_writing',  
                ctx: "", //canvas上下文  
                writing_width: 0, //文字图片宽度  
                writing_height: 0, //文字图片高度  
                writingData: {  
                    writing: "",  
                    rowType: "horizontal", // 横排 == horizontal 竖排 == vertical  
                    color: "#000000",  
                    typeface: "ZQKNLT",  
                },  
            }  
        },  
        onLoad() {  
        //  this.tap()  
        },  
        methods: {  
            async CreateWriting() {  
                uni.showLoading({  
                    title: "生成文字中...",  
                });  
                const ctx = uni.createCanvasContext(this.canvas_rid, this);  
                this.ctx = ctx;  

                //清空之前的canvas  
                ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);  
                ctx.draw(true,async ()=>{  
                    await this.drawWritingText(ctx);  

                    uni.hideLoading();  
                });  

            },  
            /**  
             * @description 绘制文字  
             * @param {Object} ctx  
             */  
            drawWritingText(ctx){  
                return new Promise((revolve,reject)=>{  
                    let fontSize = 16;  
                    let typeface = this.writingData.typeface;  
                    let color = this.writingData.color;  
                    let text = this.writingData.writing;  
                    //normal  
                    ctx.font = `normal ${fontSize}px ${typeface}`; // 字体  
                    //ctx.  
                    console.log("ctx.font:",ctx.font)  
                    ctx.setFillStyle(color) //文字颜色：默认黑色  

                    let measure = ctx.measureText(text).width;  
                    this.writing_width = 0;  
                    this.writing_height = 0;  
                    if (this.writingData.rowType == 'horizontal') {  
                        //横排  
                        this.writing_width = measure;  
                        this.writing_height = 32;  
                        ctx.setTextAlign('left');  
                        ctx.fillText(text, 0, 40); //文字内容、x坐标，y坐标  
                    } else if (this.writingData.rowType == 'vertical') {  
                        //垂直  
                        this.drawTextVertical(ctx, text, 40, 40);  
                        this.writing_width = 32;  
                        this.writing_height = measure;  
                        if (text.length > 0) {  
                            this.writing_height += 40;  
                        }  
                    }  

                    ctx.draw(true,()=>{  
                        revolve();  
                    })  
                })  
            },  
        }  
    }  
</script>  

<style scoped lang="scss">  
    @import url("/static/stylesheet.css");  
    @font-face {  
    font-family: 'ZQKNLT';  
    src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2');  
    font-weight: normal;  
    font-style: normal;  
    font-display: swap;  
}  

    .font_tt{  
        font-family: "ZQKNLT";  
    }  
</style>