教你学会html添加自定义字体，使用@font-face和免费字体网站

字体引入

1. 字体视界是一个免费字体下载网站，商用需授权：https://www.17font.com/
2. 字客网：@font-face生成器：https://www.fontke.com/tool/fontface/ 可以直接生成css文件

下载字体后，将字体.ttf文件上传到@font-face生成器，如下图

生成好的zip解压，将里面的文件复制到vue项目中 自己建立的字体文件夹 中

在main.js中引用字体的css文件

//引用的自己下载的字体
import "./assets/fonts/仓耳非白W04/仓耳非白W04.css";

css文件中内容如下

@charset "UTF-8";

@font-face {
  font-family: "仓耳非白W04";
  src: url("仓耳非白W04.woff2") format("woff2"),
       url("仓耳非白W04.woff") format("woff"),
       url("仓耳非白W04.ttf") format("truetype"),
       url("仓耳非白W04.eot") format("embedded-opentype"),
       url("仓耳非白W04.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

接下来就可以使用字体了，例如

h4{
  font-family: "仓耳非白W04";
}

预览效果