vue 中使用自定义字体

1.先下载字体

 

2.在新建的font.css文件中加入下面代码引入字体

@font-face {  

    font-family: 'MSYH';

    src: url('阿里巴巴普惠体 L.ttf');

    font-weight: normal;  

    font-style: normal;  

  }

  @font-face {  

    font-family: 'HY';

    src: url('汉仪天宇风行体W.ttf');

    font-weight: normal;  

    font-style: normal;  

  }

3.在组件中使用字体

<style scoped lang="less">

@import "../assets/font/font.css";

.block-top{

font-family:MSYH;

}

.block-bottom{

  font-family:HY;

}

效果如下

---