有两种选择：
使用导入
这是建议的选项。它可以确保字体通过构建管道，在编译过程中散列，以便浏览器缓存正常工作，并且在缺少文件的情况下得到编译错误。
如“添加图像，字体和文件”中所述，您需要从JS导入CSS文件。例如，默认情况下
src/index.js导入
src/index.css：
import './index.css';
这样的CSS文件会通过构建管道，并且可以引用字体和图像。例如，如果将字体放在中
src/fonts/MyFont.woff，则
index.css可能包含以下内容：
@font-face { font-family: 'MyFont'; src: local('MyFont'), url(./fonts/MyFont.woff) format('woff');}请注意，我们如何使用以开头的相对路径
./。这是一种特殊的表示法，可帮助构建管道（由Webpack驱动）发现此文件。
通常，这应该足够了。
使用资料public
夹
如果由于某种原因您 不想
使用构建管道，而是以“经典方式”进行构建，则可以使用该
public文件夹并将字体放在此处。
这种方法的缺点是，在进行生产编译时文件不会散列，因此每次更改它们时都必须更新它们的名称，否则浏览器将缓存旧版本。
如果要用这种方法，请将字体放在
public文件夹中的某个位置，例如，
public/fonts/MyFont.woff。如果您采用这种方法，则还应该将CSS文件放入
public文件夹中，
而不
要从JS导入它们，因为混合使用这些方法将非常混乱。因此，如果您仍然想要这样做，则将有一个类似的文件
public/index.css。您必须从手动将
<link>样式表添加到
public/index.html：
<link rel="stylesheet" href="%PUBLIC_URL%/index.css">
在其中，您将使用常规的CSS表示法：
@font-face { font-family: 'MyFont'; src: local('MyFont'), url(fonts/MyFont.woff) format('woff');}注意我如何使用它
fonts/MyFont.woff作为路径。这是因为
index.css位于
public文件夹中，因此可以从公共路径（通常是服务器根目录）进行提供，但是如果您部署到GitHub
Pages并将
homepage字段设置为
http://myuser.github.io/myproject，则可以从提供
/myproject。但是
fonts，该
public文件也位于该文件夹中，因此可以
fonts相对地（
http://mywebsite.com/fonts或
http://myuser.github.io/myproject/fonts）进行投放。因此，我们使用相对路径。
请注意，由于在本示例中我们避免使用构建管道，因此它不会验证文件是否实际存在。这就是为什么我不推荐这种方法的原因。另一个问题是我们的
index.css文件没有缩小并且没有散列。因此，对于最终用户而言，它的运行速度将会变慢，并且浏览器可能会缓存文件的旧版本，这会给您带来风险。
使用哪种方式？
使用第一种方法（“使用导入”）。我仅描述了第二个，因为这是您尝试执行的操作（根据您的评论来判断），但是它有很多问题，并且只有在解决某些问题时才是最后的选择。
