时间戳

首页 > 解决方案 > 字体已加载但未应用

reactjs - 字体已加载但未应用

问题描述

我在我的 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 相关的所有内容都可以正常工作:(

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

提前致谢 ！

标签： reactjssassnode-sass

解决方案

解决方案是不使用“字体显示：可选”...

推荐阅读