开发项目中,因为对配置项要求高.因此字体包没有放在本地,使用的线上路径
想本地开发我们会在项目中的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' //正式
}
}
},