vue项目引入字体样式

1、先下载好需要的字体样式，下载好的应该是个.ttf文件

2、在asset中创建fonts文件夹，将字体样式文件放进去，然后再到里面创建font.css文件
3、font.css文件里面进行引用

@font-face {
    
    
  /* 重命名字体名 */
  font-family: 'HeFengShuDaoZhaoHe';
  /* 引入字体 */
  src: url('./HeFengShuDaoZhaoHe.ttf');
  font-weight: normal;
  font-style: normal;
}

4、接下来就是看你自己是要局部引入还是全局引入了，我是在全局引入的，也就是main.js文件引入

import '@/assets/fonts/font.css'

5、字体样式使用

.title {
    
    
   font-family : 'HeFengShuDaoZhaoHe';  // 这里是使用
   font-size: 24px;
   text-align: center;
   margin: 30px 0 0 30px;
}

6、我下载字体样式的地方：跳转