字体已加载但未应用

Question

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

我将 scss 文件与 node-sass 一起使用，我的字体是本地字体并使用 @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 is loaded but not applicated

sass

reactjs

node-sass