微信小程序中设置引入字体不生效
Nemo0711 opened this issue · comments
Nemo0711 commented
微信小程序端生成海报设置引入字体不生效
xlfsummer commented
使用微信原生设置字体是否生效?
如果微信原生是生效的,可以在这里放上你的核心代码
Nemo0711 commented
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>
xlfsummer commented
经测试,微信不支持此功能
https://developers.weixin.qq.com/s/KCT51xmq7Zkp