如何将字体添加到基于 create-react-app 的项目中？

Question

我正在使用 create-react-app 并且不喜欢 eject 。

目前尚不清楚通过@font-face 导入并在本地加载的字体应该放在哪里。

即，我正在加载

@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');
}

原文由 Maxim Veksler 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 文件夹的某个位置，例如放入 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 提供服务。 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 ）。因此我们使用相对路径。

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

使用哪种方式？

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

原文由 Dan Abramov 发布，翻译遵循 CC BY-SA 4.0 许可协议

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-font-loader 包

使用安装包

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']
   }
});

原文由 sudo bangbang 发布，翻译遵循 CC BY-SA 4.0 许可协议