vue3中导入全局字体

新人前端的踩坑摸索日常，上步骤：

（1）在项目src下新建文件夹 font-style,把字体ttf文件放到该文件夹中，同时在该文件夹里创建font.css文件,字体tff避免侵权可以从阿里免费字体库里下载，戳这：iconfont-阿里巴巴矢量图标库

 

 2.font.css中代码如下：

@font-face {
    font-family: 'AlibabaPuHuiTi-2-35-Thin';
    src: url('./AlibabaPuHuiTi-2-35-Thin.ttf');
    font-weight: normal;
    font-style: normal;
}
.thin {
    font-family: 'AlibabaPuHuiTi-2-35-Thin';
}
@font-face {
    font-family: 'AlibabaPuHuiTi-2-45-Light';
    src: url('./AlibabaPuHuiTi-2-45-Light.ttf');
    font-weight: normal;
    font-style: normal;
}
.light {
    font-family: 'AlibabaPuHuiTi-2-45-Light';
}

3.在app.vue中引入想使用的字体

<style> 
	@import './font-style/font.css';
	body {
		font-family: AlibabaPuHuiTi-2-35-Thin; 
	}
</style>