vue如何使用第三方字体

1.打开阿里图标库

iconfont-阿里巴巴矢量图标库

阿里的是免费的，但是字体比较少。没有找到别的免费图标库，如果各位有的话在评论区提供一下，谢谢

2.解压下载文件，在项目中添加ttf、woff、woff2

将刚刚下载的woff文件粘贴到src/assets/fonts中。再新建fonts.css文件，引入字体，如上图

这里的font-family是自定义的字体名字，在css中可以直接使用

fonts.css 代码：

@font-face {
  font-family: 'AlimamaShuHeiTi';
  src: url('./AlimamaShuHeiTi-Bold.woff') format('woff'), url('./AlimamaShuHeiTi-Bold.woff2') format('woff2');
}

在main.js中引入fonts.css

import "./assets/fonts/fonts.css";

在css中使用

<style scoped lang="scss">
.amount{
  font-size: 40px;
  position: relative;
  font-family: AlimamaShuHeiTi;
}
</style>