css时间字体

之前做一些设计给的特效数字时都是让ui切图给我，然后存到数组，根据实际数字去取，感觉又麻烦又low
刚好浏览别人的网站的时候看到了另外一种炫酷的方式

看一下效果图

image.png

仔细研究了一下，使用到了一种字体 ---'digifacewide', serif;
于是我自己测试了一下写了一个demo，发现用这种字体后并没有出现想象的效果，后来查阅了一下网站发现这种字体时需要下载的 digifacewide.ttf，于是在网上找到这个文件下载下来
然后用scss引入

 @font-face {
    font-family: 'digifacewide';
    src: url('./digifacewide.ttf');
  }
 .specialFont{
    font-family: 'digifacewide', serif;
    font-size: 44px;
  }

颜色什么的其实时可以自己控制的看一个比较完善的例子

  <template>
  <ul class="net-main__people">
    <li :value="onlineNumber[0]">{{onlineNumber[0]}}</li>
    <li :value="onlineNumber[1]">{{onlineNumber[1]}}</li>
    <li :value="onlineNumber[2]">{{onlineNumber[2]}}</li>
    <li :value="onlineNumber[3]">{{onlineNumber[3]}}</li>
    <li :value="onlineNumber[4]">{{onlineNumber[4]}}</li>
    <li :value="onlineNumber[5]">{{onlineNumber[5]}}</li>
  </ul>
</template>
<script>
  export default{
    data(){
      return{
        onlineNumber: [0,0,8,7,8,5]
      }
    }
  }

</script>
<style lang="scss">
  @font-face {
    font-family: 'digifacewide';
    src: url('./digifacewide.ttf');
  }
  .net-main__people {
    overflow: hidden;
    width: 420px;
    height: 86px;
    margin: 0 auto;
  li {
    position: relative;
    float: left;
    margin: 0 5px;
    padding: 0 10px;
    width: 33px;
    height: 86px;
    line-height: 86px;
    font-size: 44px;
    color: blue;
    font-family: 'digifacewide', serif;
    background: rgba(67, 142, 255, 0.2);
  }
  li::before {
    content: attr(value);
    z-index: 10;
    position: absolute;
    color: #00f8FF;
    mask: linear-gradient(to top, blue, transparent);
  }
  }

</style>