vue项目使用线上字体包

开发项目中,因为对配置项要求高.因此字体包没有放在本地,使用的线上路径

想本地开发我们会在项目中的assets中放入.ttf字体包文件,

在线上使用,我们要和后端配合好,对字体包放在后端库里

在项目中

1.assrts中放入字体包.ttf 

2.创建fontConfig.css文件,

@font-face {
  font-family: 'homefont';
  src: url('https://gxwx-sit.cpiccdn.com/ddzsc/Alimama_ShuHeiTi_Bold.ttf');
}

@font-face {
  font-family: 'homefont2';
  src: url('https://gxwx.cpiccdn.com/ddzsc/Alimama_ShuHeiTi_Bold.ttf');
}

3.在项目的public中在放入字体包文件

4.项目中(我是单独的某个页面使用,如果全局使用,在mains挂载即可)

 <div class="tit"
                 :style="{fontFamily:fontConfig}">太保早晨</div>

// 引入字体
import '@/assets/fontConfig.css'
computed: {
    // 判断字体
    fontConfig () {
      if (window.location.hostname == 'sit.gxwx.cpic.com.cn') {
        return 'homefont'  //测试
      } else {
        return 'homefont2'  //正式
      }
    }
  },