vue-cli3.0 引入外部字体并使用

遇到要在项目中引入一些外部字体，我使用的是思源字体

cli2的我还没试过，现在的方法是cli3的，不用配置config文件就可以

第一步：去下载想要引入的字体的字体包，找ui要或者网上自己去搜

第二步：将要的字体放在资源目录下，看自己项目需求要放哪里，创建一个css文件

第三步：在fonts.css文件中引入想要的字体

// 这是fonts.css 可以设置多种字体
// 注意：font-family: 'XXX'; 将字体名字自定义为XXX,使用时要用这个名字
 
@font-face {
  font-family: 'Medium';
  src: url('./SourceHanSansSC-Medium.otf');
}
 
@font-face {
  font-family: 'Regular';
  src: url('./SourceHanSansSC-Regular.otf');
}

第四步：在项目的main.js文件中引入刚写好的css文件，路径记得对应上自己项目中的路径

// main.js中引入外部字体
import './assets/fonts/fonts.css'

最后一步：直接在vue文件中的样式添加字体样式

.text {
  font-family: 'Regular'; // 这里的Regular是引入时的自定义名字
}

其实引入字体包体积比较大，会导致加载卡顿的很明显，所以最后还是启用了用了默认的字体没有继续优化这一块了

vue-cli3.0 引入外部字体并使用

推荐阅读