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

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

Answer 2

这是建议的选项。这样可以确保您的字体通过构建管道，在编译过程中散列，以便浏览器缓存正常工作，并且在文件丢失时出现编译错误。

如“添加图像，字体和文件”中所述，您需要具有从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?

Webfont未部署在create-react-app中

2 个答案: