如何在create-react-app项目中使用本地字体文件

Question

在使用create-react-app创建的react项目中，我在CaviarDreams.ttf文件夹中放置了一个名为/asset的字体文件。

在默认的index.css文件中，我确实是这样的：

@font-face {
  font-family: 'CaviarDreams';
  src: url('assets/CaviarDreams.ttf') format('truetype'),
}

body {
  margin: 0;
  font-family: "CaviarDreams";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  background: #f2f2f2;
}

但是，字体完全不变。 我也尝试过App.css，但还是一样。

我做错什么了吗？

Answer 1

ttf格式不支持Web的100％。

在Web中使用之前，您必须将桌面字体转换为Web字体。

尝试-https://www.fontsquirrel.com/tools/webfont-generator（在线Webfont生成器）

并下载Web字体并相应地添加CSS。