Question

我正在使用React-Boilerplate version 3.6.0和库react-notifications，并且遇到以下问题：这些通知中使用的图标显示不正确。我确定没有正确加载react-notifications中定义的字体。我已经尝试按照样板建议使用FontFaceObserver加载字体，但是由于找不到该字体，因此承诺被拒绝了。 Screenshot of the issue

库中的字体定义如下：

@font-face {
  font-family: 'Notification';
  src: url('#{$react-notifications-font-base-path}/notification.eot?s3g3t9');
  src: url('#{$react-notifications-font-base-path}/notification.eot?#iefixs3g3t9') format('embedded-opentype'),
  url('#{$react-notifications-font-base-path}/notification.woff?s3g3t9') format('woff'),
  url('#{$react-notifications-font-base-path}/notification.ttf?s3g3t9') format('truetype'),
  url('#{$react-notifications-font-base-path}/notification.svg?s3g3t9#notification') format('svg');
  font-weight: normal;
  font-style: normal;
}

我通过FontFaceObserver加载字体的代码：

const notificationObserver = new FontFaceObserver('Notification', {});
notificationObserver.load().then(() => {
  console.log("Loaded font");
}, () => {
  console.log("Could not load font")
});

我已经检查了webpack是否正在加载字体，并且可以向您保证字体是正确的，正如我在Chrome的“网络”标签中所见。

任何帮助将不胜感激。

反应不加载字体

0 个答案: