Question

我使用create-react-app创建了一个React应用，并选择不弹出。目前，我正在尝试使用@font-face导入本地字体，但我没有成功。

这是我当前的文件夹结构：

/
+ public/
+ src/
-- index.js
-- App.js
-- App.css
++ assets/
+++ css/
---- general.css
+++ fonts/
---- CircularStd-Medium.woff

在App.js上，我正在导入general.css文件（import './assets/css/general.css';）。

在general.css文件上，我按照以下说明设置@font-face：

@font-face {
  font-family: 'CircularStd-Medium';
  font-style: normal;
  src: local('CircularStd-Medium'), local('CircularStd-Medium'),
    url('../fonts/CircularStd-Medium.woff') format('woff'), 
}

我已经尝试过关注this answer，但它没有用。代码编译，但简单的Times New Roman出现了。

Answer 1

很有趣，我正在导入相同的字体。当我将其放在公用文件夹中时，它不起作用。因此，我将其移至“路由器”区域（因为它也很全局）。字体现在可以通过构建管道并可以正常工作

require('./fonts/circular-std-master/css/circular-std.css');

查看我的代码仓库;）

https://github.com/maltenz/malte/tree/master/src/Router

Answer 2

我将本地字体保留在/public/fonts中，在样式表（我使用sass）中，选择字体的网址是/fonts/myfont 注意开头的/。

样式表（/ img / myimage）中引用的图像也是如此

将本地字体导入create-react-app项目

2 个答案: