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

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'), 
}

我已经尝试关注，但没有成功。代码可以编译，但会出现一个简单的 Times New Roman。

Answer 1

有趣的是，我正在导入相同的字体。当我把它放在 public 文件夹中时它不起作用。所以我把它移到了我的 "router" 区域（因为它也很全球化）。字体现在通过构建管道并工作

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

查看我的代码库 ;)

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

Answer 2

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

样式表中引用的图片也是如此(/img/myimage)

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

Import local font to create-react-app project

css

fonts

reactjs

create-react-app