Vue引入自定义字体

PS：经过笔者实践，不是很推荐对字体文件二次处理的做法，在使用字体时会出现很多奇奇怪怪的样式错误。

创建文件夹，把ttf文件放进来。

 

font.css：每导入一个字体就新建一个@font-face

@font-face {
  font-family: 'SF Pro Display';
  src: url('./SFUIDisplay-Regular.ttf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'SF Pro Display Heavy';
  src: url('./sf-pro-display_heavy.woff.ttf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'SF Pro Display Bold';
  src: url('./SFUIDisplay-Bold.ttf');
  font-weight: normal;
  font-style: normal;
}

在main.js中引入css文件

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

最后在项目配置中添加字体文件。我这里用的是Vue-cli3.0，在vue.config.js的