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

Question

我已经添加了我的字体：

@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 启动时，我无法显示正确的字体。

Answer 1

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

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

有关详细信息，请参阅 CRA page on the public folder

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

Create React App: Failed to decode downloaded font | OTS parsing error

css

opentype

create-react-app