前端vue如何使用font-family字体包?准备好字体包文件,一般是ttf格式, 可引入多个字体包,用不同的名字,但

准备好字体文件

一般格式为"tff",网上搜索就行,放入自己的项目目录下

编写字体样式

/style/font.scss

可引入多个字体包,用不同的名字,但不能跟系统字体名字相同

@font-face {
  font-family: 'MyFont';   //字体包名字
  src: url('引入字体包路径');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'MyNewFont';   //字体包名字
  src: url('引入字体包路径');
  font-weight: normal;
  font-style: normal;
}

全局引入

在mian.js或者App.vue中引入,局部引入也行

//mian.js中引入
import './style/font.scss'

//App.vue中引入,在scss标签中写入
@import './style/font.scss';

使用

font-family:'MyFont'