我使用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。
最佳答案
有趣的是,我导入了相同的字体。当我将其放在公共(public)文件夹中时它不起作用。所以我把它移到了我的“路由器”区域(因为它也是相当全局化的)。字体现在通过构建管道并可以工作
require('./fonts/circular-std-master/css/circular-std.css');
查看我的存储库中的代码;)
关于css - 导入本地字体到create-react-app元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50912979/