有两种选择:

使用进口

这是建议的选项。它确保您的字体通过构建管道，在编译期间获得哈希值，以便浏览器缓存正确工作，并且如果文件丢失，您将得到编译错误。

正如在“添加图像，字体和文件”中所描述的，你需要从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');
  /* other formats include: 'woff2', 'truetype, 'opentype',
                            'embedded-opentype', and 'svg' */
}

注意我们是如何使用以./开头的相对路径的。这是一种特殊的符号，可以帮助构建管道(由Webpack提供支持)发现该文件。

通常这就足够了。

使用公用文件夹

如果出于某种原因，你不喜欢使用构建管道，而是使用“经典的方式”，你可以使用公共文件夹并将字体放在那里。

这种方法的缺点是，在编译用于生产时，文件不会得到哈希值，因此每次更改它们时都必须更新它们的名称，否则浏览器将缓存旧版本。

如果你想这样做，把字体放在公共文件夹的某个地方，例如，在public/fonts/MyFont.woff。如果你遵循这种方法，你也应该把CSS文件放到公共文件夹中，而不是从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');
}

Notice how I’m using fonts/MyFont.woff as the path. This is because index.css is in the public folder so it will be served from the public path (usually it’s the server root, but if you deploy to GitHub Pages and set your homepage field to http://myuser.github.io/myproject, it will be served from /myproject). However fonts are also in the public folder, so they will be served from fonts relatively (either http://mywebsite.example/fonts or http://myuser.github.io/myproject/fonts). Therefore we use the relative path.

注意，由于我们在本例中避免了构建管道，因此它不会验证文件是否实际存在。这就是我不推荐这种方法的原因。另一个问题是index.css文件没有被缩小，也没有得到哈希值。因此，对于最终用户来说，速度会变慢，而且浏览器可能会缓存旧版本的文件。

使用哪种方式?

使用第一个方法(“使用导入”)。我只描述了第二个，因为这是你试图做的(从你的评论来看)，但它有很多问题，应该是你在解决某些问题时的最后手段。

我添加了

@font-face {
    font-family: 'Sanchez-Regular';
    src: local('Sanchez-Regular'),url(../assets/fonts/Sanchez/Sanchez-Regular.ttf) format('truetype');
}

而且效果非常好 就像我们在index.css中使用其他字体一样

以下是一些做到这一点的方法:

1. 导入字体

例如，要使用Roboto，请使用

yarn add typeface-roboto

or

npm install typeface-roboto --save

在index.js:

import "typeface-roboto";

有很多开源字体和大部分谷歌字体的npm包。你可以在这里看到所有的字体。所有的包都来自那个项目。

2. 对于由第三方托管的字体

比如谷歌字体，你可以去fonts. Google。com在那里你可以找到你可以放在public/index.html中的链接

就像这样

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

or

<style>
    @import url('https://fonts.googleapis.com/css?family=Montserrat');
</style>

3.下载字体并将其添加到源代码中。

下载字体。例如，对于谷歌字体，您可以访问fonts.google.com。点击下载按钮下载字体。

移动字体到字体目录在你的src目录

src
|
`----fonts
|      |
|      `-Lato/Lato-Black.ttf
|       -Lato/Lato-BlackItalic.ttf
|       -Lato/Lato-Bold.ttf
|       -Lato/Lato-BoldItalic.ttf
|       -Lato/Lato-Italic.ttf
|       -Lato/Lato-Light.ttf
|       -Lato/Lato-LightItalic.ttf
|       -Lato/Lato-Regular.ttf
|       -Lato/Lato-Thin.ttf
|       -Lato/Lato-ThinItalic.ttf
|
`----App.css

现在，在app。css中添加这个

@font-face {
  font-family: 'Lato';
  src: local('Lato'), url(./fonts/Lato-Regular.otf) format('opentype');
}

@font-face {
    font-family: 'Lato';
    font-weight: 900;
    src: local('Lato'), url(./fonts/Lato-Bold.otf) format('opentype');
}

@font-face {
    font-family: 'Lato';
    font-weight: 900;
    src: local('Lato'), url(./fonts/Lato-Black.otf) format('opentype');
}

对于ttf格式，必须提到format('truetype')。对于woff, format('woff')

现在你可以在课堂上使用这种字体了。

.modal-title {
    font-family: Lato, Arial, serif;
    font-weight: black;
}

4. 使用web-font-loader包

使用

yarn add webfontloader

or

npm install webfontloader --save

在src/index.js中，你可以导入它并指定所需的字体

import WebFont from 'webfontloader';

WebFont.load({
   google: {
     families: ['Titillium Web:300,400,700', 'sans-serif']
   }
});

我犯了这样的错误。

@import "https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i&subset=cyrillic,cyrillic-ext,latin-ext";
@import "https://use.fontawesome.com/releases/v5.3.1/css/all.css";

它以这种方式正常工作

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i&subset=cyrillic,cyrillic-ext,latin-ext);
@import url(https://use.fontawesome.com/releases/v5.3.1/css/all.css);

你可以使用WebFont模块，它极大地简化了这个过程。

render(){
  webfont.load({
     custom: {
       families: ['MyFont'],
       urls: ['/fonts/MyFont.woff']
     }
  });
  return (
    <div style={your style} >
      your text!
    </div>
  );
}

有两种选择:

使用进口

这是建议的选项。它确保您的字体通过构建管道，在编译期间获得哈希值，以便浏览器缓存正确工作，并且如果文件丢失，您将得到编译错误。

正如在“添加图像，字体和文件”中所描述的，你需要从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');
  /* other formats include: 'woff2', 'truetype, 'opentype',
                            'embedded-opentype', and 'svg' */
}

注意我们是如何使用以./开头的相对路径的。这是一种特殊的符号，可以帮助构建管道(由Webpack提供支持)发现该文件。

通常这就足够了。

使用公用文件夹

如果出于某种原因，你不喜欢使用构建管道，而是使用“经典的方式”，你可以使用公共文件夹并将字体放在那里。

这种方法的缺点是，在编译用于生产时，文件不会得到哈希值，因此每次更改它们时都必须更新它们的名称，否则浏览器将缓存旧版本。

如果你想这样做，把字体放在公共文件夹的某个地方，例如，在public/fonts/MyFont.woff。如果你遵循这种方法，你也应该把CSS文件放到公共文件夹中，而不是从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');
}

Notice how I’m using fonts/MyFont.woff as the path. This is because index.css is in the public folder so it will be served from the public path (usually it’s the server root, but if you deploy to GitHub Pages and set your homepage field to http://myuser.github.io/myproject, it will be served from /myproject). However fonts are also in the public folder, so they will be served from fonts relatively (either http://mywebsite.example/fonts or http://myuser.github.io/myproject/fonts). Therefore we use the relative path.

注意，由于我们在本例中避免了构建管道，因此它不会验证文件是否实际存在。这就是我不推荐这种方法的原因。另一个问题是index.css文件没有被缩小，也没有得到哈希值。因此，对于最终用户来说，速度会变慢，而且浏览器可能会缓存旧版本的文件。

使用哪种方式?

使用第一个方法(“使用导入”)。我只描述了第二个，因为这是你试图做的(从你的评论来看)，但它有很多问题，应该是你在解决某些问题时的最后手段。