VUE引入自定义字体


1. 下载自定义字体包(后缀名为.ttf, .otf, .eot等格式)

2. 在项目的assets文件夹下建一个fonts文件夹,把字体包放到fonts文件夹中,然后创建一个fonts.css文件

3. 在fonts.css文件中定义你所用的字体(这里以PingFang为例)

@font-face: {
  font-family: '庞门正道标题体';
  src: url("../font/庞门正道标题体.ttf") format('truetype') ;
  font-weight: normal;
  font-style: normal;
}

4. 在app.vue中全局引入fonts.css,或在指定页面引入

<style lang="scss">
  @import './assets/fonts/fonts.css';

  #app {
    font-family: 'PingFang-RE';
    font-weight: 400;
  }
</style>


举报

© 著作权归作者所有


1