字体已加载但未应用

Question

我在我的 React 项目中使用 Roboto 字体，但我遇到了一个奇怪的问题，当我在本地访问我的应用程序时，字体并没有应用于我的文本，但是如果我打开元素检查器并取消选中并重新检查一个 css 属性（不管是哪一个）字体都被应用到任何地方！

我使用带有 node-sass 的 scss 文件，我的字体是本地的并使用 @font-face 定义

这是字体的 .scss 文件

@font-face {
  font-family: Roboto;
  src: url("./Roboto/Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: Roboto;
  src: url("./Roboto/Roboto-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: optional;
}

@font-face {
  font-family: Roboto;
  src: url("./Roboto/Roboto-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: Roboto;
  src: url("./Roboto/Roboto-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: optional;
}

@font-face {
  font-family: Roboto;
  src: url("./Roboto/Roboto-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: Roboto;
  src: url("./Roboto/Roboto-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: optional;
}

我将所有 .scss 文件导入到 main.scss 文件中，并将此文件导入到我的 App.js 中。除了字体之外，与 css 相关的所有内容都可以正常工作:(

有没有人遇到过类似的问题？我还为图标使用了一种字体，效果很好

提前致谢！

Answer 1

解决办法是不使用“font-display: optional” ...