在开发中，经常会遇到许多自定义字体的需求，这里简单记录下，以便后续查看。
第一步，首先，我们将需要的字体库从UI或者谷歌下载到本地，只需要ttf格式的文件即可；
第二步，在vue项目中assets文件夹下新建一个文件夹font,然后将下载到本地的ttf格式的文件放进去；
p1.png
第三步，在font文件下新建一个font.css文件，里面补充这些代码：
//font.css
@font-face {
font-family: 'MYFONT';
src: url('FZZDXJW.ttf');
font-weight: normal;
font-style: normal;
}
- 上面的
MYFONT是你自定义的名字，随便修改。
第四步，在main.js文件里直接引入font.css文件：
//main.js
import '@/assets/font/font.css';
然后，就可以在需要的地方直接使用了：
.title {
text-align: center;
margin: 50px auto;
font-size: 49px;
color: #fff;
font-family: MYFONT;
}
- 当然，引入一个字体库势必会增大打包体积，如果在项目中并没有大量使用自定义字体的情况下，可以考虑适当的切图来处理。
