如何添加字体，以创建-反应-应用程序的项目？

Question

我使用的是创建反应-应用程序，而不是eject。

目前还不清楚通过@字体面板导入并在本地加载的字体应该放在哪里。

也就是说，我在装货

@font-face {
  font-family: 'Myriad Pro Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff');
}

有什么建议吗？

-编辑

包括丹在回答中提到的要点

➜  Client git:(feature/trivia-game-ui-2) ✗ ls -l public/static/fonts
total 1168
-rwxr-xr-x@ 1 maximveksler  staff  62676 Mar 17  2014 MYRIADPRO-BOLD.woff
-rwxr-xr-x@ 1 maximveksler  staff  61500 Mar 17  2014 MYRIADPRO-BOLDCOND.woff
-rwxr-xr-x@ 1 maximveksler  staff  66024 Mar 17  2014 MYRIADPRO-BOLDCONDIT.woff
-rwxr-xr-x@ 1 maximveksler  staff  66108 Mar 17  2014 MYRIADPRO-BOLDIT.woff
-rwxr-xr-x@ 1 maximveksler  staff  60044 Mar 17  2014 MYRIADPRO-COND.woff
-rwxr-xr-x@ 1 maximveksler  staff  64656 Mar 17  2014 MYRIADPRO-CONDIT.woff
-rwxr-xr-x@ 1 maximveksler  staff  61848 Mar 17  2014 MYRIADPRO-REGULAR.woff
-rwxr-xr-x@ 1 maximveksler  staff  62448 Mar 17  2014 MYRIADPRO-SEMIBOLD.woff
-rwxr-xr-x@ 1 maximveksler  staff  66232 Mar 17  2014 MYRIADPRO-SEMIBOLDIT.woff
➜  Client git:(feature/trivia-game-ui-2) ✗ cat src/containers/GameModule.css
.GameModule {
  padding: 15px;
}

@font-face {
  font-family: 'Myriad Pro Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Regular'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-REGULAR.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Condensed';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Condensed'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-COND.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Semibold Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Semibold Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-SEMIBOLDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Semibold';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Semibold'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-SEMIBOLD.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Condensed Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Condensed Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-CONDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold Condensed Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Condensed Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDCONDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold Condensed';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Condensed'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDCOND.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLD.woff') format('woff');
}

Answer 1

有两种选择：

使用进口

这是建议的选择。它确保您的字体通过构建管道，在编译过程中获得散列，以便浏览器缓存正确工作，如果缺少文件，则会得到编译错误。

作为在“添加图像、字体和文件”中描述，您需要从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文件夹

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

这种方法的缺点是文件在为生产而编译时不会得到散列，所以每次更改它们时都必须更新它们的名称，或者浏览器会缓存旧版本。

如果要这样做，请将字体放在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页面并将homepage字段设置为http://myuser.github.io/myproject，则将从/myproject提供服务。然而，fonts也在public文件夹中，因此它们将相对地从fonts ( http://mywebsite.example/fonts或http://myuser.github.io/myproject/fonts)中得到服务。因此，我们使用相对路径。

注意，由于我们在本例中避免构建管道，所以它不会验证该文件是否确实存在。这就是我不推荐这种方法的原因。另一个问题是我们的index.css文件没有缩小，也没有散列。因此，对于最终用户来说，速度会更慢，而浏览器可能会对文件的旧版本进行缓存。

使用哪种方式？

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

Answer 2

以下是一些这样做的方法：

1.输入字体

例如，对于使用Roboto，使用

yarn add typeface-roboto

或

npm install typeface-roboto --save

在index.js中：

import "typeface-roboto";

有很多开源字体和大多数Google字体的npm包。您可以看到所有字体这里。所有的包都来自那个项目。

2.由第三方托管的字体

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

​

​

就像

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

或

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

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

下载字体。例如，对于Google字体，您可以转到fonts.google.com。单击“下载”按钮下载字体。

将字体移动到fonts目录中的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字体加载程序包。

安装包使用

yarn add webfontloader

或

npm install webfontloader --save

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

import WebFont from 'webfontloader';

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

Answer 3

1. 转到Google字体https://fonts.google.com/
2. 如下图所示，选择您的字体：

​

​

1. 复制并粘贴到新选项卡中的url，您将得到添加该字体的css代码。在这种情况下，如果你去

https://fonts.googleapis.com/css?family=Spicy+Rice

它会像这样打开：

​

​

4 .将代码复制并粘贴到style.css中，然后开始使用该字体，如下所示：

      <Typography
          variant="h1"
          gutterBottom
          style={{ fontFamily: "Spicy Rice", color: "pink" }}
        >
          React Rock
        </Typography>

结果：

​

​