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

一尘不染

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

css

我正在使用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');
}

阅读 1446

2020-05-16

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

请注意，我们如何使用以开头的相对路径./。这是一种特殊的表示法，可以帮助构建管道（由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文件没有被缩小并且没有散列。因此，对于最终用户而言，它的运行速度将会变慢，并且浏览器可能会缓存文件的旧版本。

使用哪种方式？

使用第一种方法（“使用导入”）。我仅描述了第二个，因为这是您尝试执行的操作（根据您的评论来判断），但是它有很多问题，并且只有在解决某些问题时才是最后的选择。

2020-05-16