需求：画描边字体，希望描边圆润
已尝试方案：
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;}<div class="text" data-text="描边文字"></div> |
效果还可以，但描边太尖锐，希望圆润一些
SVG:
浏览器中通过使用paint-order: stroke; 可以实现圆滑描边效果，但在小程序中该属性不支持
<svg> <text x="10" y="40" class="text">SVG 1000 20 描边文字</text></svg>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； } |
问题：请问小程序中文字圆滑描边的方案？
text-shadow: white 0 0 3rpx;
突然的灵机一动，感觉不错
顶一下，svg的相关属性，移动端的兼容性很好，但是小程序完全不支持，希望可以加进来