LED样式文字

1.字体的文件可以在defont网站中找到自己需要的字体

2.然后通过fontsquirrel将下载好的字体文件转换为eot格式和woff格式。

3在需要引入的vue文件的style处添加以下内容(url需要根据自己的文件路径修改)

@font-face {
  font-family: "ledtext";
  src: url("../../assets/font/DS-DIGIT.ttf") format("truetype"),
    // url("../../assets/font/DS-DIGIT.eot") format("embedded-opentype"),
    // url("../../assets/font/DS-DIGIT.woff2") format("woff2");
}

4.在需要使用他的时候就按照我们平常css定义字体的方式一样。

.num {
        width: 20rem;
        height: 90%;
        line-height: 3.94rem;
        font-size: 2rem;
        color: #03f6ff;
        font-family: "ledtext";
        text-align: center;
        background-image: url("~@/assets/SysShipMonitoring/numBag.png");
        background-size: 100% 100%;
        span {
          font-size: 1rem;
        }
      }