未在create react应用程序中部署Webfont

Question

在CRA使用网络字体有问题，在开发模式下它是这样加载的

字体已加载

但是当部署时，在生产模式下，它似乎根本没有加载。伙计们，有什么想法吗？这是我的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;
    }

Answer 1

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

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

导入'./index。css’；这样的CSS文件通过构建管道，可以引用字体和图像。例如，如果将字体放在src/fonts/MyFont中。沃夫，你的索引。css可能包括以下内容：

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

请注意我们如何使用相对路径。 /.这是一种特殊的符号，可帮助构建管道（由Webpack提供支持）发现此文件。在此处回答：如何为基于create-react-app的项目添加字体？

Answer 2

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