创建 React 应用程序：无法解码下载的字体 | OTS 解析错误

Posted 2023-03-15

【中文标题】创建 React 应用程序：无法解码下载的字体 | OTS 解析错误

【英文标题】：Create React App: Failed to decode downloaded font | OTS parsing error

【发布时间】：2021-10-27 14:42:46

【问题描述】：

我已经添加了这样的字体：

@font-face 
  font-family: "NHaasGroteskDSProMedium";
  src: url(/fonts/NHaasGroteskDSProM.otf);

@font-face 
  font-family: "NHaasGroteskDSProBold";
  src: url(/fonts/NHaasGroteskDSProB.otf);

文件夹位置很好，你可以在这里看到：

我一直有这个错误：

Failed to decode downloaded font: http://localhost:3000/fonts/NHaasGroteskDSProM.otf
OTS parsing error: invalid sfntVersion: 1008813135

因此，当npm start 启动时，我无法显示正确的字体。

【参考方案1】：

src 文件夹中的文件不直接由您的服务器提供。这些文件首先与构建过程捆绑在一起，任何未导入的文件都不会在构建中结束。

对于这些类型的文件，您可以将它们放在public 文件夹中，最终将在构建中保持不变，并且可以由您的服务器提供服务。

欲了解更多信息，请参阅CRA page on the public folder