文字描边方案(可否支持svg画图paint-order属性)
发布于 5 年前 作者 gqiao 17640 次浏览 来自 问答

需求:画描边字体,希望描边圆润

已尝试方案:

  • 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;
    }

问题:请问小程序中文字圆滑描边的方案?

1 回复

顶一下,svg的相关属性,移动端的兼容性很好,但是小程序完全不支持,希望可以加进来

回到顶部