Vue项目配置字体包

在写项目的时候难免不了UI让你把字体换成统一的，这个时候就跟UI要字体包或者从网上下载

创建个文件夹里面放字体包和生成一个css文件

字体包格式是ttf的最好，如果不是的话可以去网上找能转换格式的网站转换一下

这是我自己在用的：字体转换器 (在线自由) — Convertio

css文件里写：

@font-face {
    font-family: 'PF';
    src: url('TTF文件地址');
    font-weight: normal;
    font-style: normal;
  }

然后在需要加文字格式的页面下引入

@import "css文件地址";

重点来了

有时候配置会不生效，这个时候要在vue.config里面写上

配置成功之后重启一下项目，如果还是没生效就在对应页面的css里写入font-family: 'JDZY';然后就可以看到字体变化成JDZY了

如果你的vue项目loader配置无法加载TTF文件怎么办？

这个时候其实你可以把字体转换成base64，附上我自己在用的官网：在线@font面生成器 — Transfonter

打开网站之后按照下面的流程，就可以把你的ttf的字体包转换成base64的格式

下载返回给你的CSS文件就可以啦

如果遇到什么其他的问题欢迎在评论区留言讨论