xlfsummer / mp-painter

声明式地创建适用于 uniapp, 原生微信小程序和原生H5的 canvas 海报

Home Page:https://mp-painter.xlf-summer.cn/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

微信小程序中设置引入字体不生效

Nemo0711 opened this issue · comments

微信小程序端生成海报设置引入字体不生效

使用微信原生设置字体是否生效?
如果微信原生是生效的,可以在这里放上你的核心代码

let res = await painter.draw({
  type: "container",
  top: 0,
  left: 0,
  width: 750,
  height: 1714,
  children: [{
    type: "image",
    top: 0,
    left: 0,
    width: 750,
    height: 1024,
    src: mapImg
  },
  {
    position: "absolute",
    left: 0,
    top: 0,
    type: "image",
    width: 750,
    height: 1714,
    src: require('@/static/img/share-back.png')
  },
  //右上角 
  {
    type: "container",
    position: "absolute",
    left: 300,
    top: 47,
    width: 450,
    height: 300,
    children: [{
      type: 'text',
      left: 400,
      align: 'right',
      content: dayText,
      fontFamily: "DINCond-Bold",
      fontSize: 58,
      color: '#fff'
    },
    {
      type: 'text',
      left: 400,
      top: 15,
      align: 'right',
      fontFamily: "DINCond-Bold",
      content: weatherText,
      fontSize: 30,
      color: '#e3ff52',
      fontWeight: 'bold'
    }
    ]

  },
  // 用户头像
  {
    position: "absolute",
    left: 486,
    top: 973,
    type: "container",
    width: 130,
    height: 130,
    children: [{
      type: "clip",
      path: {
        type: "rounded-rect",
        width: 130,
        height: 130,
        borderRadius: 65
      },
      content: {
        type: "image",
        width: 130,
        height: 130,
        src: userCover
      }
    }]
  },
  // 里程
  {
    position: "absolute",
    left: 0,
    top: 1024,
    type: "container",
    width: 360,
    height: 200,
    children: [{
      type: "container",
      direction: "horizontal",
      children: [{
        type: 'text',
        left: 65,
        top: 20,
        align: 'left',
        content: distanceNum,
        fontFamily: "DINCond-Bold",
        fontSize: 110,
        color: '#e3ff52'
      },
      {
        type: 'text',
        left: 10,
        top: 40,
        align: 'left',
        content: 'km',
        fontSize: 34,
        fontWeight: "bold",
        color: '#fff'
      }
      ]
    },
    {
      type: 'text',
      left: 70,
      top: 10,
      align: 'left',
      content: '今日里程',
      fontSize: 24,
      color: '#837fa0'
    }

    ]
  },

  // 用户信息
  {
    position: "absolute",
    left: 360,
    top: 1114,
    type: "container",
    width: 390,
    height: 110,
    children: [{
      type: "container",
      children: [{
        type: 'text',
        left: 195,
        top: 10,
        align: 'center',
        content: userName,
        fontSize: 34,
        fontWeight: "bold",
        color: '#fff'
      },
      {
        type: 'text',
        left: 195,
        top: 10,
        align: 'center',
        content: userId,
        fontSize: 22,
        color: '#4f4b61'
      }
      ]
    }

    ]
  },

  {
    position: "absolute",
    left: 0,
    top: 1264,
    type: "container",
    width: 750,
    height: 100,
    children: [{
      type: "container",
      direction: "horizontal",
      children: [{
        type: 'container',
        width: 270,
        children: [{
          type: 'text',
          left: 145,
          top: 0,
          align: 'center',
          content: time,
          fontFamily: "DINCond-Bold",
          fontSize: 50,
          color: '#fff'
        },

        ]


      },
      {
        type: 'container',
        width: 210,
        children: [{
          type: 'text',
          left: 120,
          top: 0,
          align: 'center',
          content: speed,
          fontFamily: "DINCond-Bold",
          fontSize: 50,
          color: '#fff'
        },]
      },
      {
        type: 'container',
        width: 270,
        direction: "horizontal",
        children: [{
          type: 'text',
          left: 132,
          top: 0,
          align: 'center',
          content: kal,
          fontFamily: "DINCond-Bold",
          fontSize: 50,
          color: '#fff'
        },
        {
          type: 'text',
          left: length,
          top: 5,
          align: 'right',
          content: '卡',
          fontSize: 22,
          color: '#fff'
        }
        ]
      }
      ]
    }

    ]
  },

  // 赛事名称
  {
    position: "absolute",
    left: 0,
    top: 1394,
    type: "container",
    width: 750,
    height: 115,

    children: [{
      type: "text",
      top: 20,
      left: 95,
      width: 500,
      fontSize: 30,
      // lineClamp: 1,
      fontWeight: "bold",
      color: '#14121e',
      content: projiectName,
    },
    {
      type: "text-block",
      top: 15,
      left: 95,
      width: 500,
      fontSize: 26,
      lineClamp: 1,
      color: '#849c0a',
      content: itemName,
    },
    ]
  },
  {
    position: "absolute",
    left: 69,
    top: 1552,
    type: "container",
    width: 110,
    height: 110,
    children: [{
      type: "clip",
      path: {
        type: "rounded-rect",
        width: 110,
        height: 110,
        borderRadius: 55
      },
      content: {
        type: "image",
        width: 110,
        height: 110,
        src: '/static/img/qr-code.jpg'
      }
    }]
  },
  ]
});
<style>
@font-face {
  font-family: "DINCond-Bold";
  src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format("truetype");
  font-style: normal;
  font-weight: normal;
}
</style>

经测试,微信不支持此功能
https://developers.weixin.qq.com/s/KCT51xmq7Zkp