Webfont 未部署在 create-react-app 中答案

【问题标题】：Webfont is not being deployed in create-react-appWebfont 未部署在 create-react-app 中
【发布时间】：2020-01-27 10:37:06
【问题描述】：

在 CRA 中使用网络字体时遇到问题，在开发模式下它会像这样加载

Font is loaded

但是在部署时，在生产模式下它似乎根本没有加载。有什么想法吗？这是我的css

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

    @font-face {
      font-family: 'Noto Sans';
      src: local('Noto Sans KR'), url(./fonts/NotoSansKR-Bold.otf) format('opentype');
      font-weight: 700;
    }

【问题讨论】：

标签： create-react-app webfonts

【解决方案1】：

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

如“添加图像、字体和文件”中所述，您需要从 JS 导入 CSS 文件。例如，默认 src/index.js 导入 src/index.css：

导入'./index.css'; 像这样的 CSS 文件会通过构建管道，并且可以引用字体和图像。例如，如果您将字体放在 src/fonts/MyFont.woff 中，您的 index.css 可能包含以下内容：

@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(./fonts/MyFont.woff) format('woff');
}

请注意我们如何使用以 ./ 开头的相对路径。这是一个特殊的符号，可以帮助构建管道（由 Webpack 提供支持）发现这个文件。在这里回答： How to add fonts to create-react-app based projects?

【讨论】：

你删除了我的评论吗？无论如何，不要复制别人的答案
我提到过，这是你的答案。
不.. 这不是

【解决方案2】：

在生产过程中，您的字体被捆绑为 base64 Uri，如果您启用了代码拆分，那么您可以在您的块列表中以不同的散列名称看到它们。

【讨论】：

但是，为什么这些字体没有在生产中应用？