实现场景

最近实现了一些很复杂，页面色彩丰富，Q版的页面。发现UI设计的一些文字，类似艺术字。要适配国际化，所以说不能以切图的方式展示，类似下图文字展示等~

因为全局都是这个文字样式，肯定是没有办法使用切图的方式一个个实现

解决方案

搜寻了许多文字渐变方案，文字边框方案，阴影方案等

简单文字渐变

    .text{
        background: #FFF; // 其渐变背景颜色
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
     }

文字渐变+边框颜色 （在其尾部添加伪类主要是实现文字边框功能)
HTML
    <span class="greyWhitetext" :text="VIP ABC">VIP ABC</span>
CSS
    .greenWhitetext{
      position: relative;
      z-index: 1;
      text-align: center;
      font-family: FZZhuoHJW;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      letter-spacing: 0.035px;
      background: #FFF; // 背景颜色（为文字的颜色，可以是渐变）
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      padding: 0px 2px;
    }
    .greenWhitetext:before{
      content: attr(text);
      position:absolute;
      z-index: -1;
      inset: 0;
      -webkit-text-stroke: 2px #3E6D28; //边框颜色
    }

写在最后

经常围绕着H5开发，经常遇到很多兼容性问题，适配问题，有没有志同道合的兄弟互相交流交流的，虽然写代码很苦，但是生活更苦~