react中如何通过@font-face使用其它字体

工作的时候，用户可能不喜欢浏览器默认的字体，想要选用其它的字体，这时候我们如何去完成这个需求呢？

解决这个需求我们需要使用两个内容：

1.css中的@font-face属性

2.客户需要的字体文件

css代码如下：

@font-face {
  font-family: "Aa厚底黑";/*这个是字体文件的名字，不要把.ttf加在这里*/
  src: url('./assets/font/Aa厚底黑.ttf') format("truetype");
  /*url表示你本地的字体文件的路径*/
 /*如果你的字体文件是以.otf结尾的，format请使用("opentype"),可以在网上查找对应的关键字*/
}

然后给你需要的内容添加上样式

.h1{
  font-family: "Aa厚底黑";
  font-size: 36px;
}

效果图如下