小程序描边字体实现方案

bolelee
  • 1.2k

需求:
带描边的字体,包含中文、数字,要求实现效果与PS制作的设计图效果一致

环境:微信小程序

已尝试的实现方案:

  • text-shadow: 设置“上下左右”“左上右上左下右下”八个方向实阴影
.text {
    font-size: 48rpx;
    color: #fff;
    text-shadow: 3px 0 0px #000, -3px 0 0px #000, 0 3px #000, 0 -3px #000, 3px 3px #000, -3px -3px #000, 3px -3px #000, -3px 3px #000;
    font-weight: 900;
}

效果勉强,但达不到期望

  • -webket-text-stroke: 描边
.text {
    font-size: 48rpx;
    color: #fff;
    -webkit-text-stroke: 2px #000;
    font-weight: 900;
}

描边会占据字体原本大小,描边稍微粗一点,就会将字体填充颜色挤压没了

  • SVG: text
<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: 3px;
      stroke-linejoin: round;
    }

效果与text-stroke一样,描边会占据字体本身大小

问题:请问还有哪些实现字体描边的方案,能较好地实现描边字体?

回复
阅读 7.1k
3 个回答
✓ 已被采纳

文字描边没有非常完美的方案。不过有一个相对来说比较好的方案,如下:

.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>

可以通过 text-stroke 来调整边缘组细

高崇乐
  • 3
新手上路,请多包涵

text-shadow: white 0 0 3rpx;
突然的灵机一动,感觉不错

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏