需求:画描边字体,微信小程序开发工具控制台。希望描边圆润
已尝试方案:
text-shodow:设置“上下左右”“左上右上左下右下”八个方向实阴影,效果勉强
-webkit-text-stroke:
.text {
position: relative;
}
.text::before, .text::after {
content: attr(data-text);
font-size: 48rpx;
color: #fff;
font-weight: 900;
}
.text::before {
-webkit-text-stroke: 8rpx #000;
}
.text::after {
position: absolute;
top: 0;
left: 0;
}
效果还可以,但描边太尖锐,希望圆润一些
SVG:
浏览器中通过使用paint-order: stroke; 可以实现圆滑描边效果,但在微信小程序中该属性不支持
body {
background-color: #e54e5f;
}
.text {
fill: #fff;
stroke: #000;
font-size: 36px;
font-weight: bolder;
font-family: sans-serif;
stroke-width: 12px;
stroke-linejoin: round;
paint-order: stroke;
}
问题:请问微信小程序中文字圆滑描边的方案?