如何使用 font-face 将本地字体添加到我的 React 应用程序中

Question

这是我的结构：

+ src/
++   assets/
+++    fonts/
++++      myfont.ttf
-- index.js
-- App.js
-- App.css

我将字体添加到_fonts.scss并将其导入到App.scss

_font.scss

$font_dir: "../assets/fonts";

@font-face{
  font-family: 'myfont';
  src: url($font_dir + "myfont.ttf");
}

但问题是我遇到了这个错误！！

未找到模块：您试图导入 ../assets/fonts/myfont.ttf ，它位于项目 src/ 目录之外。 不支持 src/ 之外的相对导入。

任何帮助欣赏它？

Answer 1

由于错误提到字体应该在您的项目目录（package.json 所在的位置）或子目录中